如何使用 StreamingResponse 将多个图像从 FastAPI 后端发送到 JavaScript 前端？

我有一个 FastAPI 端点/image/ocr接受、处理并返回多个图像作为StreamingResponse:

async def streamer(images):
    for image in images:
        # Bytes
        image_bytes = await image.read()

        # PIL PNG
        image_data = Image.open(BytesIO(image_bytes))

        # Process
        # image_processed = ...
    
        # Convert from PIL PNG to JPEG Bytes
        image_ocr = BytesIO()

        image_ocr.save(image_processed, format='JPEG')

        yield image_ocr.getvalue()

@router.post('/ocr', summary='Process images')
async def ocr(images: List[UploadFile]):
    return StreamingResponse(
        streamer(images),
        status_code=status.HTTP_200_OK,
        media_type='image/jpeg'
    )

在我的 React 应用程序中，我将多个图像发送到/image/ocr使用 Axios 配置的端点arraybuffer，并将返回的图像转换为Base64 using btoa, String.fromCharCode and Unit8Array:

const imageSubmit = async data => {
    const formData = new FormData()
    
    // A `useRef` that stores the uploaded images
    data?.current?.files?.successful.map(image =>
        formData.append('images', image.data)
    )

    try {
        const response = await request.post(
            '/image/ocr',
            formData,
            {responseType: 'arraybuffer'}
        )

        const base64String = btoa(
            String.fromCharCode(
                ...new Uint8Array(response.data)
            )
        )

        const contentType = response.headers['content-type']

        const fullBase64String = `data:${contentType};base64,${base64String}`

        return fullBase64String
    } catch (error) {
        // Error log
    }
}

问题是我要发送多张图像，例如，这个图片 https://i.stack.imgur.com/hRD1f.png and 这个图片 https://i.stack.imgur.com/n3ozM.png，正在被端点接受、处理并返回/image/ocr，但是当我转换response.data使用最后一个代码片段中的方法我只得到一个Base64 image.

我看了一眼原始的response看看我是否可以迭代ArrayBuffer我通过了response.data:

数组缓冲区对象 https://i.stack.imgur.com/f0qBs.png

但它不起作用for(const image of response.data) {}。我看到了ArrayBuffer has a slice方法，但我不确定这是否意味着这两个图像都在ArrayBuffer我需要切片然后转换，这很奇怪，因为至少一张图像被转换为Base64截至目前，或将其转换为另一种类型，因为我看到它可以通过一些不同的方式完成here https://stackoverflow.com/questions/71313129/how-to-render-streamable-image-on-react-coming-from-fastapi-server, here https://nono.ma/fetch-multiple-images-or-files-at-once-with-promises-in-typescript and here https://javascript.info/blob.

If the slice选项是正确的，我不确定如何选择开始和结束，因为ArrayBuffer只是随机数和符号。

关于如何获取这两个图像的任何想法Base64在我的 React 应用程序上？

经过几个小时的研究，我放弃了 Axios文档 https://axios-http.com/docs/intro说它“从浏览器生成 XMLHttpRequests”，这意味着它不支持流。

阅读更多有关流API https://developer.mozilla.org/en-US/docs/Web/API/Streams_API并观看 Google 的系列节目Youtube https://www.youtube.com/watch?v=G9PpImUEeUA，我开始使用获取API https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API，因为它支持写入 (16:26) 和读取 (6:24) 流式传输。

通过更换try用这个来阻止我的问题：

const response = await fetch('http://localhost:4000/image/ocr', {
    method: 'POST',
    headers: {
        Authorization: ''
    },
    body: formData
})

const reader = response.body.getReader()

while (true) {
    const { value, done } = await reader.read()

    // Base64
    const base64 = `data:${response.headers['content-type']};base64,${btoa(String.fromCharCode(...new Uint8Array(value)))}`

    console.log(base64)

    if (done) break
}

我可以将异步生成器与StreamingResponse并在我的 React 应用程序中获取多个图像。

值得深入研究流 API，因为它也可以作为 Websocket 工作，而无需编写处理套接字的特定后端