React Native Expo项目文件上传失败：后端返回‘未上传文件’

问题现象 #

通过expo-image-picker选择图片后，前端已成功获取并存储图片URI，但调用用户更新接口时，后端返回No file uploaded错误，日志显示req.files与req.file?.path均为undefined。

核心问题 #

1. FormData传参错误：直接将图片URI字符串传入FormData，后端multer无法识别为合法的文件对象
2. 请求头设置错误：手动指定Content-Type: multipart/form-data，缺失浏览器自动生成的boundary分隔符，导致后端无法解析表单数据

修复步骤 #

1. 前端组件：修正FormData添加图片的逻辑 #

需要将Expo返回的本地URI转换为Blob对象，再添加到FormData中：

const handleUpdateProfile = async () => {
  console.log("clicked");
  console.log({ formPostImg });

  const formBody = new FormData();
  formBody.append("address", address);

  // 将图片URI转为Blob并添加到FormData
  if (formPostImg) {
    const response = await fetch(formPostImg);
    const blob = await response.blob();
    // 从URI中提取文件名，或自定义文件名
    const fileName = formPostImg.split("/").pop();
    formBody.append("img", blob, fileName);
  }

  try {
    const res = await updateProfileFn({
      formBody,
      setErrMsg,
    });
    if (res && res.message.includes("success")) {
      console.log("success");
    }
  } catch (error) {
    // 错误处理逻辑
  }
};

2. 请求函数：移除手动设置的Content-Type头 #

fetch发送FormData时，浏览器会自动生成包含boundary的Content-Type头，手动设置会覆盖正确的头信息，导致后端解析失败：

const res = await fetch(url, {
  method: "PATCH",
  headers: {
    // 移除这一行："Content-Type": "multipart/form-data",
    Accept: "application/json",
    Authorization: `Bearer ${token}`,
  },
  body: formBody,
});

3. 后端补充检查：确认multer配置有效性 #

确保你的upload是正确配置的multer实例，示例配置如下：

const multer = require('multer');
// 配置临时存储路径（需确保目录存在且有读写权限）
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, './temp/uploads');
  },
  filename: function (req, file, cb) {
    cb(null, Date.now() + '-' + file.originalname);
  }
});
const upload = multer({ storage: storage });

验证 #

修改完成后，前端请求会正确携带文件对象，后端multer可正常解析出req.file，后续Cloudinary上传与数据库更新流程即可正常执行。

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