Reactjs 使用send_file将文件从Flask发送到React前端会返回一个奇怪的字符串

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

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

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

并从烧瓶中接收数据

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

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

Flask后端获取这些文件，并使它们成为一个numpy数组，然后是一个PIL图像对象。然后将图像对象保存到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>
}

render（）{
}

它无法解释文件，并且除了角落中的文件图标外，什么也不显示。记录flask发送的文件时，它会输出许多字符，如���}>�{���o��N�_����|��T����吉咪~�\Ӳ���. 我不确定如何更改python后端的文件，以便react能够解释并显示它。否则，我不确定如何更改前端以显示用python制作的图像

这起作用了

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

@app.route（'/img/'，方法=['GET']
def give（文件名）：
filen='./上传/'+filename+'.png'
返回发送文件（filen）

我相信这里发生的是您正在将

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} />

console.log（this.state.img）；//我相信这里发生的是您正在将
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} />


console.log（this.state.img）；//@momoin调用
console.log（typeof this.state.img）；
？这很奇怪，我这样做时会得到字符串。这是什么意思？@momoon调用
console.log（typeof this.state.img）时会返回什么
？这很奇怪，我这样做时会得到字符串。这是什么意思？好的。我这样做了，文件传输正确。但是，现在我很好奇，如果我想更新路由，每次发送图像时我都必须使用新路由，这正常吗？有办法更新路由吗？@momion好东西，我知道这可能不是答案你想听听，但我认为你做了一个很好的决定，重新设计了数据流。使用Flask，你会想研究使用动态路由，例如，
@app.route（'/api/img/'，methods=['POST']）
这样，你只需要一个路由，当用户上传/获取图像时，你需要传递给用户的就是上传图像时生成的同一个文件名。好的，谢谢！我在考虑每次程序运行时在flask文件夹中创建一个新文件。然后当有人用该文件名调用路由时作为特殊字符串，它返回文件。听起来不错吗？听起来像是一个很酷的项目。是的，您需要两条路径。（1）上传，如您在OP中所述；（2）另一个用于获取的路径，如您在上一条评论中所述。第二个获取路径不应在每次调用它时生成新文件，它只应返回带有
send\u file
的图像。第一个路径将是发布文件的路径。请让我知道是否清楚！如果不清楚，我很乐意帮助您回答另一个问题！嘿，我只是想ed感谢你，因为你的回答，我在一周的挫折后修复了我的代码。好的。我这样做了，文件被正确传输。但是，现在我很好奇，如果我想更新路由，我每次发送图像时都必须使用新的路由，这正常吗？有办法更新路由吗？@momion好东西，我知道这可能不是您想要听到的答案，但我认为您在重新设计数据流方面做出了一个很好的决定。使用Flask，您将需要研究使用动态路由，例如，
@app.route（'/api/img/'，methods=['POST']）
这样，你只需要一个路由，当用户上传/获取图像时，你需要传递给用户的就是上传图像时生成的同一个文件名。好的，谢谢！我在考虑每次程序运行时在flask文件夹中创建一个新文件。然后当有人用该文件名调用路由时作为特殊字符串，它返回文件。听起来不错吗？听起来像是一个很酷的项目。是的，您需要两条路径。（1）上传，如您在OP中所述；（2）另一个用于获取的路径，如您在上一条评论中所述。第二个获取路径不应在每次调用它时生成新文件，它只应返回带有
send\u file
的图像。第一个路径将是发布文件的路径。请让我知道是否清楚！如果不清楚，我很乐意帮助您回答另一个问题！嘿，我只是想ed非常感谢您，因为您的回答，我在一周的挫折之后能够修复我的代码。