React前端如何转换BinData并展示MongoDB存储的图片？

问题背景 #

需要在React前端展示MongoDB中以BinData格式存储的图片，通过Flask接口返回数据后，尝试直接将二进制数据放入img的src、使用Blob/File/FileReader/Buffer转换等方法均无法正常展示图片，同时遇到base64格式数据过长、图片体积变大的问题。

现有代码 #

React前端代码

componentDidMount() {
    const headers = { "Content-Type": "application/json" };
    axios.post('http://127.0.0.1:8103/api/display_posts', { 'username' : localStorage.getItem('username')}, {headers})
        .then(res => {
            const responseData= res.data;
            console.log(res)
            console.log(responseData)

            const blobData = new Blob([responseData] , {
                type: "image/jpeg"
            })
            console.log(blobData);
            

            const myFile = new File([blobData], 'image.jpeg', {
                type: blobData.type,
            });
            console.log(myFile);

            const blob= new FileReader();
            blob.onload = function(){
                var dataURL = blob.result;
                var output = document.getElementById('here');
                output.src = dataURL;
            }
            blob.readAsDataURL(blobData);
            console.log(blob);

            const bufff =new Buffer(responseData, "binary").toString('base64');
            console.log(bufff)
            
            const bufff2 =new Buffer(responseData, "base64").toString('base64');
            console.log(bufff2)
            
            const buffer=Buffer.from(responseData, "base64");
            console.log(buffer);
            const desh = fs.writeFileSync("abc.jpg", buffer);
        

            this.setState({
                picture1: bufff,
                picture2: bufff2,
                picture3: responseData,
            });
            
        })
        .catch(
            (error) => console.log(error)
        )
}
render(){
    return(
        <>
            <div>
                {this.state.respo}
                <img id="here"/>
                <img src = {'data:image/jpeg;base64,${this.state.picture1}'} /> 
                <img src = {'data:image/jpeg;base64,${this.state.picture2}'} /> 
                <img src = {'data:image/jpeg;base64,${this.state.picture3}'} />        
        </>
    )
}

Flask后端代码

postImage = self.Posts.objects(username=self.content['username']).only('background').first()

bgImage=postImage.background
filename = postImage.background.filename
content_type = postImage.background.content_type
return send_file(bgImage, download_name=filename, mimetype=content_type), 200

核心问题分析 #

1. Axios默认解析错误：axios默认会把响应解析为JSON，导致二进制图片数据被转义破坏，无法正确还原。
2. 前端误用Node.js API：Buffer和fs是Node.js专属API，浏览器环境无法直接使用，会导致转换失败。
3. 模板字符串语法错误：使用单引号包裹模板字符串，导致${this.state.picture1}无法被正确解析为变量值。
4. Base64转换冗余：将二进制转成Base64会使体积增加约30%，还会出现数据过长的问题，完全没必要。

解决方案 #

1. 后端优化（可选，但推荐） #

如果业务允许，将接口改为GET请求，更符合静态资源获取的规范；如果必须用POST，确保Flask返回的二进制流响应头正确：

# 若使用GridFS存储，确保bgImage是正确的文件流对象
# 补充响应头，避免跨域或缓存问题
response = send_file(bgImage, download_name=filename, mimetype=content_type)
response.headers['Access-Control-Allow-Origin'] = '*'  # 根据实际跨域情况调整
return response, 200

2. 前端关键修复 #

步骤1：让Axios接收二进制数据

请求时设置responseType: 'blob'，确保axios直接返回Blob对象，不做JSON解析：

componentDidMount() {
    const headers = { "Content-Type": "application/json" };
    axios.post('http://127.0.0.1:8103/api/display_posts', 
        { username: localStorage.getItem('username') }, 
        { 
            headers,
            responseType: 'blob'  // 关键：指定接收Blob类型
        }
    )
    .then(res => {
        // 直接使用Blob创建对象URL
        const imageUrl = URL.createObjectURL(res.data);
        this.setState({ imageUrl });
    })
    .catch(error => console.log(error));
}

步骤2：正确渲染图片

直接用创建好的对象URL作为img的src，无需Base64转换：

render() {
    return (
        <>
            {this.state.imageUrl && <img src={this.state.imageUrl} alt="背景图" />}
        </>
    );
}

步骤3：组件卸载时清理资源

避免内存泄漏，在组件卸载时释放对象URL：

componentWillUnmount() {
    if (this.state.imageUrl) {
        URL.revokeObjectURL(this.state.imageUrl);
    }
}

方案优势 #

• responseType: 'blob'确保axios完整保留二进制图片数据，不会被JSON解析破坏。
• URL.createObjectURL()直接生成浏览器可识别的本地URL，无需Base64转换，体积无膨胀，加载效率更高。
• 清理对象URL避免浏览器内存泄漏。

内容的提问来源于stack exchange，提问作者Akshat Jain