将多个图像从 python 服务器发送到反应前端

Question

我正在尝试将 2 个 png（或 jpeg 或任何其他格式）图像从我的 Flask 服务器发送到我的 Reactjs 前端以在那里显示它们。不过，我不确定如何对此响应进行编码。我得到的最接近的是人们建议将图像附加到多部分表单并发送表单，但我不太清楚如何在前面解析表单，因为 response.data 是一个字符串。

我知道这甚至可能不是在通常用于发送到服务器而不是 FROM 的基础上构建多部分表单的正确方法，所以我将不胜感激任何更正！

from flask import Flask, Response
from requests_toolbelt import MultipartEncoder


{...}

# getting the images
        bytes_object_rest = do_plot(rest_coordinate_arrays, rest_vcg_arrays)
        bytes_object_stress = do_plot(stress_coordinate_arrays, stress_vcg_arrays)

]
       mpencoder = MultipartEncoder(
            fields={'rest_graph': ('rest.png', bytes_object_rest, 'image/png'),
                    'stress_graph': ('stress.png', bytes_object_stress, 'image/png')},
            )

    return Response(mpencoder.to_string(), mimetype=mpencoder.content_type)

最后，我想知道如何让烧瓶端点公开 2 个 .png 图以做出反应，以及如何解析该响应以便我可以在前面渲染这 2 个图。非常感谢你！ []

1

Answer 1

在python中将图像编码为base64:

import base64

with open("yourfile.ext", "rb") as image_file:
    encoded_string = base64.b64encode(image_file.read())

在js中解码图像：

var image = new Image();
image.src = 'data:image/png;base64,iVBORw0K...';

Answer 2

I am trying to send 2 pngs(or jpeg or any other format) images from my Flask server to my Reactjs front to display them there.

Maybe this article could be helpful for you.

您的 Flask 服务器需要公开一个 API，然后您的 React 前端可以将数据发送到该位置。

将多个图像从 python 服务器发送到反应前端

Sending multiple images FROM python server TO the react front

encoding

multipartform-data

httpresponse

flask

reactjs