求助：Flask向React返回图片后无法正常显示的问题

核心问题分析 #

你的代码存在三个关键错误：

1. Axios未指定响应类型，导致二进制图片被自动解析为字符串
2. React接收时处理逻辑错误（错误调用response.img、多余的Buffer转换操作）
3. 渲染时错误拼接outputUrl与Blob URL

修复步骤 #

1. 修正React请求代码

发送multipart/form-data时不要手动设置content-type，FormData会自动生成包含boundary的正确请求头；同时必须指定responseType: 'blob'，让Axios直接返回二进制Blob数据：

const response = await axios({
  method: "POST",
  url: "http://127.0.0.1:5000/upload",
  // 移除手动设置的content-type，避免丢失boundary导致解析失败
  data: filou,
  responseType: 'blob' // 关键：指定响应为Blob类型
});

2. 优化Flask返回逻辑

确保send_file路径正确，并明确指定图片MIME类型，避免浏览器解析歧义：

@app.route('/upload', methods=['POST'])
@cross_origin()
def fileUpload():
    # 省略文件接收、存储逻辑...
    
    if file and allowed_file(file.filename):
        # 省略文件存储逻辑...
        
        # 明确指定MIME类型，确保响应头正确
        return send_file(
            "output/final_output/panda.jpg",
            mimetype='image/jpeg',
            as_attachment=False  // 表示直接返回图片而非触发下载
        )

3. 修正React接收与渲染代码

设置responseType: 'blob'后，response.data直接就是Blob对象，无需额外转换；渲染时直接使用createObjectURL生成的URL即可，不要拼接多余的outputUrl：

.then((response) => {
    const blob = response.data; // 直接获取Blob对象
    const imageUrl = URL.createObjectURL(blob);
    setoutImage(imageUrl);
    setDone(true);
});

渲染部分简化：

{done && (
    <img
        src={outImage} // 直接使用Blob URL
        alt="处理后的图片"
        width="400"
    />
)}

额外注意事项 #

• 确保Flask中图片路径正确，推荐使用绝对路径避免歧义：os.path.join(app.root_path, "output/final_output/panda.jpg")
• 组件卸载时记得释放Blob URL，避免内存泄漏：

useEffect(() => {
    return () => {
        if (outImage) {
            URL.revokeObjectURL(outImage);
        }
    };
}, [outImage]);

内容的提问来源于stack exchange，提问作者Lyes Ye