为什么我无法使用“发送文件”从Flask发送图像以作出反应

Question

我创建了一个react应用程序，它从react前端获取信息，通过axios发送到flask后端，axios随后处理信息并创建新图像。我试图让flask通过send_文件发送图像以作出反应，但我不知道如何做。我尝试将图像保存为png，然后发送，但react端无法使用，因为它已编码。 下面是发生的事情： 烧瓶：

img = Image.fromarray((np.uint8(cm(img)*255)))
img.save("./thenewimg.png")
return send_file('./thenewimg.png','image/png')

反应：

class App extends React.component{
onReturnProcessed = res =>{
    console.log(res.data)
    this.setState({img:res.data})
    this.setState({ImgReturned:true})
    console.log(res.data.img)
    
  }
return axios
        .post(`http://localhost:5000/time`, data, {
            headers: {
                'Content-Type': 'multipart/form-data',
            },
        })
        .then(res => {
            this.onReturnProcessed(res);
            return res
    });
  }
render(){
return(
      
      <div>
        {this.state.ImgReturned &&
        <img src={(this.state.img)} />}
     </div>

);
}
}

React然后将状态变量“img”设置为flask返回的任何内容（即flask发送给它的文件）。我尝试在图像html行中显示此状态变量，但它不允许我这样做。有什么办法吗

注: 这两个都不是完整的代码，但我认为它们提供了了解所做工作所需的大部分内容

以下是记录“img”状态变量时控制台中打印的一些内容：�M�O<；���+����� ��s����我�&书信电报；��G�~qZrޱ�����s�~9���

Answer 1

您正在将第二个位置参数传递给send_file，它将doesn't accept

我想你在寻找：

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

但是，当您将文件名作为第一个参数传递时，它会根据.png扩展名自动检测mimetype，因此您可能只需要：

return send_file('./thenewimg.png')