Multer配合Node.js与React Native实现图片上传失败问题求助

问题原因及修复方案 #

1. React Native 端传参格式错误 #

你当前直接将图片uri作为字符串传入FormData，Multer无法识别为文件，需要传入符合RN FormData要求的文件对象，同时需要手动指定multipart/form-data请求头：
修改发送请求的代码：

// 替换原来的formData.append("file", this.state.image)
const fileExt = this.state.image.split('.').pop() || 'jpg';
formData.append("file", {
  uri: this.state.image,
  type: `image/${fileExt}`,
  name: `upload_${Date.now()}.${fileExt}`
});

// 发送请求时增加headers配置
const {
  data: { result }
} = await axios.post(
  "http://127.0.0.1:4000/upload",
  formData,
  {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  }
);

2. 服务端Multer存储路径配置错误 #

你配置的/upload是操作系统根目录下的文件夹，Node.js大概率没有该目录的写入权限，需要修改为项目路径下的文件夹：

const path = require('path');
const _storage = multer.diskStorage({
    destination: function (req, file, cb) {
      // 路径根据你的路由文件位置调整，确保指向项目内的upload文件夹，提前手动创建该文件夹
      const uploadPath = path.join(__dirname, '../upload');
      cb(null, uploadPath)
    },
    filename: function (req, file, cb) {
      // 增加文件后缀，避免存储的文件无法打开
      const ext = file.originalname?.split('.').pop() || 'jpg';
      cb(null, file.fieldname + '-' + Date.now() + '.' + ext)
    }
  })

3. 服务端文件取值位置错误 #

Multer解析后的单文件数据存放在req.file中，而非req.body.file，修改路由内的取值逻辑：

router.post("/", upload.single("file"), function (req, res) {
  console.log(req.body);
  // 打印解析后的文件数据，确认收到
  console.log(req.file);

  // 增加文件存在判断，避免空值报错
  if(!req.file) {
    return res.status(400).json({result: "未接收到上传的图片"});
  }

  Article.create({
    // 其余字段保持不变
    db_img: req.file.filename // 若需要存全路径则改为req.file.path
  })
  // 后续逻辑保持不变
});

额外注意项 #

• 提前在你指定的路径下创建upload文件夹，并确保Node.js进程拥有该文件夹的读写权限
• iOS端如果出现uri识别问题，可以将传入的uri前缀file://去掉后再传入FormData

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