React+Node.js项目中上传图片后无法显示问题求助

我正在开发一个React前端配合Node后端API的项目，遇到上传头像后无法正常显示的问题，推测问题出在图片上传的处理流程中。发现从服务器获取的图片数据类型为object而非Buffer，导致无法正常渲染，求解决思路。

前端上传表单 #

<form
    id="RegistrationForm"
    ref={FormRef}
    encType="multipart/form-data"
    className={`bg-[#f2e798] w-11/12 md:w-9/12 mx-auto lg:w-6/12 mt-[20px] py-10 rounded box_shadow`}
    onSubmit={(evt) => {
        evt.preventDefault(); 
        const ImageInputElem = ImageInputRef.current; 
        UploadNewProfilePic(uploadURL, ImageInputElem, setPictureError)
    }}
>
    <div className= "FormStyle w-11/12 mx-auto grid">
        <label htmlFor="profile_pic">Profile picture</label>
        <input
            name="profile_pic"
            id="profile_picInput"
            ref={ImageInputRef}
            type="file"
            placeholder="Upload an image for your profile picture here"
            className="text-lg file:rounded-lg file:font-['DecoTech'] file:bg-[#99cbae] file:text-white cursor-pointer border-black border-[1px] rounded"
            onChange={(evt) => { HandleFileChange(evt, setImage) }}
        />
        <FormButtons />
    </div>
    <div
        id="pictureError"
        className="ErrorDiv"
        ref={ImageErrorRef}>
        {pictureError != null && pictureError.length > 0 && RenderError(pictureError)}
    </div>
</form>

前端提交请求Hook #

const UploadNewProfilePic = async (apiURL, ImageInputElem, setPictureError) => {
    const formData = new FormData; 
    formData.append("profile_pic", ImageInputElem.files[0])
    try {
        await fetch(apiURL,
            {
                method: "PUT",
                body: formData,
            }
        )
            .then(async response => {
                const result = await response.json();

                if (response.ok) {
                    console.log("上传图片成功: ", result.message)
                    GoHome();
                }
                else {
                    console.log("上传失败: ", result.error)
                    RenderErrorArray(result.error, setPictureError);
                }
            })
    } catch (e) {
        console.log("上传文件出错:", error);
        RenderErrorArray([{ para: "file upload error", msg: `Upload error: ${error}` }], setPictureError);
    }
}

服务端Multer配置与路由 #

const express = require('express');
const router = express.Router(); 
const cors = require('cors'); 
const UserController = require('../controller/userController.js'); 
const path = require('path')
const multer = require('multer');

const storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, "public/uploads")
    },
    filename: function (req, file, cb) {
        const ext = path.extname(file.originalname);
        const filename = `${Date.now()}-${file.filename}${ext}`;
        cb(null, filename)
    },
});


const upload = multer({
    limits: { fileSize: 1024 * 1024 * 5 },
    storage: storage,
    fileFilter: function (req, file, cb) {
        if (!file.originalname.match(/\.(jpg|jpeg|png)$/)) {
            return cb(new Error('Only image files are allowed!'));
        }
        cb(null, true);
    }
}); 

router.put('/users/:id/uploadnewpicture', cors(), upload.single("profile_pic"), UserController.UploadNewProfilePicture)

用户Schema定义 #

const User = new Schema({
    //...
    profile_pic: { data: Buffer, contentType: String },
     //...
})

服务端PUT请求控制器 #

exports.UploadNewProfilePicture = (req, res, next) => {
    try {
        const { BufferImage } = dataHooks();          
        const BufferedImg = {
            data: fs.readFileSync(path.join(__dirname, '../public/uploads/', req.file.filename)),
            contentType: req.file.mimetype,
        }
        const updates = {
            _id: req.params.id,
            profile_pic: BufferedImg, 
        }
        const updateUser = new User(updates)
        User.findByIdAndUpdate(req.params.id, updateUser)
            .then(() => {
                return res.status(200).json({message: "头像更新成功。"})
            })
            .catch(e => {
                return res.status(404).json({ error: [{ param: "server", msg: `更新头像出错: ${e}.` }] })
            })
    } catch (e) {
        console.log("上传头像出错: ", e)
        return res.status(500).json({ error: [{para: "server error", msg: `Upload error: ${e}`}]})
    } 
}

前端获取图片Hook #

const FetchProfilePic = async (apiURL, userID, dispatch) => {
    await fetch(apiURL,
        {
            method: "GET",
        }
    )
        .then(async response => {
            if (response.ok) {
                await response.json()
                    .then(result => {
                        localStorage.setItem("ProfilePicture", JSON.stringify(result.profile_pic))
                        dispatch(result.profile_pic)
                    })
            }
            else {
                const result = await response.json();
                console.log("获取图片出错: ", result.error)
            }
        })
}

前端渲染图片Hook #

const RenderProfilePic = props => {
    const { profile_pic } = props;
    const ImageStyle = `select-none w-[270px] h-[270px] object-cover rounded-full mx-auto`;
    const ImageWrapperStyle = `m-auto overflow-hidden relative z-[1]`; 
    console.log("profile_pic: ", typeof profile_pic.data)
    const binaryData = new Uint8Array(profile_pic.data);
    const base64Image = btoa(String.fromCharCode.apply(null, binaryData));

    //const base64Image = profile_pic.data.toString('base64');

    const dataURL = `data:${profile_pic.contentType};base64,${base64Image}`;
    try {
        return (
            <div
                id="ImageWrapper"
                className={ImageWrapperStyle}
            >
                <img src={dataURL} alt="Profile Picture" className={`${ImageStyle}`} />
            </div>
        )
    } catch (e) {
        console.log("渲染图片出错: ", e)
    }
}

核心问题分析 #

MongoDB的Buffer类型数据通过JSON返回前端时，会被自动序列化为包含type和data数组的对象，而非原始Buffer。前端无法直接将这个对象转换为Uint8Array生成base64，导致图片无法渲染。

解决方案步骤 #

1. 服务端修改：返回Base64编码的图片数据

在获取头像的接口中，直接把Buffer转成Base64字符串返回，避开序列化问题：

// 示例：获取头像的控制器方法
exports.GetProfilePicture = (req, res, next) => {
  User.findById(req.params.id)
    .then(user => {
      if (!user?.profile_pic) {
        return res.status(404).json({ error: [{ param: "image", msg: "头像不存在" }] });
      }
      // 将Buffer转为base64字符串
      const base64Data = user.profile_pic.data.toString('base64');
      res.status(200).json({
        profile_pic: {
          contentType: user.profile_pic.contentType,
          base64: base64Data
        }
      });
    })
    .catch(e => {
      res.status(500).json({ error: [{ param: "server", msg: `获取头像失败: ${e}` }] });
    });
};

2. 前端修改：直接使用Base64生成DataURL

更新获取和渲染逻辑，直接用服务端返回的base64：

// FetchProfilePic修改
const FetchProfilePic = async (apiURL, userID, dispatch) => {
  await fetch(apiURL)
    .then(async response => {
      if (response.ok) {
        const result = await response.json();
        localStorage.setItem("ProfilePicture", JSON.stringify(result.profile_pic));
        dispatch(result.profile_pic);
      } else {
        const result = await response.json();
        console.log("获取图片失败: ", result.error);
      }
    });
};

// RenderProfilePic修改
const RenderProfilePic = props => {
  const { profile_pic } = props;
  const ImageStyle = `select-none w-[270px] h-[270px] object-cover rounded-full mx-auto`;
  const ImageWrapperStyle = `m-auto overflow-hidden relative z-[1]`; 

  // 直接用服务端返回的base64生成dataURL
  const dataURL = `data:${profile_pic.contentType};base64,${profile_pic.base64}`;
  
  try {
    return (
      <div id="ImageWrapper" className={ImageWrapperStyle}>
        <img src={dataURL} alt="Profile Picture" className={ImageStyle} />
      </div>
    );
  } catch (e) {
    console.log("渲染图片出错: ", e);
  }
};

3. 可选优化：改用文件路径存储

Multer已经把图片存在public/uploads目录，可直接存储文件路径到数据库，前端通过URL访问：

• 服务端返回/uploads/xxx.jpg，前端用${apiBaseURL}/uploads/xxx.jpg作为img的src
• 这种方式更适合生产环境，减少数据库存储压力，简化前后端处理流程

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