React Native通过Axios向Node.js(Multer)上传FormData遇网络错误

1. 后端代码的无效冗余代码 #

你的userController.js末尾存在一段属于前端逻辑的代码，会导致服务器运行报错，直接删除：

data.append("picture", {
  uri: image,
  name: "perfil.jpg",
  type: "image/jpeg",
});

2. 路由与Controller不匹配 + 缺失URL参数 #

你的PictureRoutes.js中POST路由为/picture，但userController.js的addPicture方法需要从req.params.id获取用户ID，且当前路由绑定的是pictureController.addNew，和实际处理逻辑的userController.addPicture不对应，这会导致：

• 后端无法获取用户ID，抛出未定义错误
• 请求找不到正确的处理函数

修改PictureRoutes.js的POST路由：

// 替换原POST路由
router.post("/picture/:id", upload, checkToken, userController.addPicture);

3. 前端FormData字段缺失 + 类型错误 #

Postman中你设置了name: perfil，但前端未在FormData中追加该字段；同时图片的type字段使用了image（仅为大类），不是后端能识别的合法MIME类型：

修改前端handleUpdatePicture方法：

import { Platform } from 'react-native'; // 记得引入Platform

const handleUpdatePicture = () => {
  if (image == null) return;

  const data = new FormData();
  // 追加Postman中设置的name字段
  data.append("name", "perfil");
  // 从uri后缀提取文件类型，生成合法MIME类型
  const fileExt = image.uri.split('.').pop();
  data.append("file", {
    // Android下直接用原uri，iOS需要去掉file://前缀
    uri: Platform.OS === 'android' ? image.uri : image.uri.replace('file://', ''),
    name: `profile.${fileExt}`,
    type: `image/${fileExt}`
  });
  return data;
};

4. Axios请求的关键注意事项 #

• 不要手动设置Content-Type: multipart/form-data：Axios会自动根据FormData生成带boundary的请求头，手动设置会丢失boundary参数，导致后端无法解析FormData
• 确认usersApi.addPicture方法中，请求URL包含用户ID参数，示例：

// usersApi中的addPicture实现参考
const addPicture = (userId, formData) => {
  return axios.post(`/picture/${userId}`, formData);
};

5. 后端目录权限检查 #

确保后端项目根目录下的uploads/文件夹存在，且服务器进程拥有该目录的读写权限，否则Multer会因无法写入文件抛出错误，导致请求失败。

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