从python服务器发送多个图像到React Front

Question

我正尝试从Flask服务器向我的Reactjs前端发送2个png（或jpeg或任何其他格式）图像，以在那里显示它们。我不确定如何编码此响应。我最接近的是建议人们将图像附加到多部分表单上并发送表单的人，但是由于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

  

我正在尝试从我的设备发送2个png（或jpeg或任何其他格式）的图像   将烧瓶服务器放到我的Reactjs前端，以在那里显示它们。

Maybe this article could be helpful for you.

您的Flask服务器需要公开一个API，您的React Frontend可以在其中向其发送数据。