IT技术 - 使用 send_file 从 Flask 向 React 前端发送文件返回一串奇怪的字符 - 吾爱随笔录

使用 send_file 从 Flask 向 React 前端发送文件返回一串奇怪的字符

IT技术 reactjs flask

2021-05-22 09:55:08

在我当前的程序中，用户在react中选择一个文件，该文件被发送到flask

return axios
        .post(`http://localhost:5000/time`, data, {
            headers: {
                'Content-Type': 'multipart/form-data',
            },
        })
        .then(res => {
            this.onReturnProcessed(res);
            return res
    });
  }

并从flask中接收数据

onReturnProcessed = res =>{
    console.log((res.data))
    this.setState({img:res.data})
    this.setState({ImgReturned:true})
    
    
  }

Flask 后端获取这些文件，并将它们变成一个 numpy 数组，然后是一个 PIL Image 对象。然后将 Image 对象保存到 Flask 文件夹中

img = Image.fromarray((np.uint8(cm(img)*255)))
img.save("./thenewimg.png")

Flask 然后将文件发送到 React 前端

return send_file('./thenewimg.png',mimetype = 'image/png',as_attatchment=True)

问题是当React渲染flask发送的文件时

render(){
<div>
<img src = {this.state.img}/>
</div>
}

它无法解释文件，除了角落里的文件图标外，什么也不显示。当flask发送的文件被记录时，它会输出很多字符，如 }> { o n _ | t Jm~ \Ӳ . 我不确定如何更改 python 后端上的文件，以便 react 可以解释它并显示它。否则，我不确定如何更改前端以显示用 python 制作的图像。

这有效

@app.route('/img/<filename>',methods = ['GET'])
def give(filename):
    filen = './UPLOADS/'+filename+'.png' 
    return send_file(filen)

1个回答

我相信这里发生的事情是您正在分配res.data给您的img变量。res.data不是分配给的图像本身，var而是它的 base64 表示。这就是为什么您看到的是奇怪的字符而不是实际图像的原因。

完成您想要的更简单的方法可能是发回图像的 URL，而不是图像本身。通过这种方式，您可以将图像 URL 存储在字符串中，然后像这样显示图像：


console.log(this.state.img); // <-- this now returns 'https://whateveryourapiaddris.com/img/ID'

...

<img src={this.state.img} />

这意味着您需要创建一个单独的flask路线，该路线将摄取您分配给图像的图像 ID，并send_file在该端点返回相应的图像。