React Native通过Axios传图至Express Multer服务失败求助

1. 修复FormData构造逻辑（规避Blob转换兼容性问题） #

React Native环境下，FormData支持直接使用图片URI构造文件项，无需转换为Blob，这种方式更适配原生平台的请求处理。修改createFormData函数：

const createFormData = (body: any = {}) => {
  const data = new FormData();

  if (image) {
    // 直接用ImagePicker返回的uri构造文件项，使用返回的mimeType保证类型准确
    data.append("image", {
      uri: image.uri,
      name: "profile.jpg",
      type: image.mimeType || "image/jpeg"
    } as any);
  }

  Object.keys(body).forEach((key) => {
    data.append(key, body[key]);
  });

  return data;
};

2. 移除Axios的transformRequest配置 #

你的transformRequest强制返回原始body，破坏了Axios对FormData的默认处理逻辑——Axios本应自动生成带boundary的multipart/form-data请求头，这是Multer解析文件的关键。修改uploadImage函数：

const uploadImage = async (id: string, access_token: string) => {
  const body = createFormData({ id }); // 此时createFormData无需异步处理
  const response = await axios.post(
    `${API_BASE_URL}user/validate/upload-profile-image`,
    body,
    {
      headers: {
        Authorization: `Bearer ${access_token}`,
        // 不要手动设置Content-Type，让Axios自动生成带boundary的请求头
      },
      validateStatus: function (status) {
        return status < 500;
      },
    }
  );

  return response;
};

3. 验证服务端Multer配置 #

确保服务端Multer中间件的字段名与前端完全一致：

// Express服务端示例代码
const multer = require('multer');
const upload = multer({ dest: './uploads/' });

// 确保中间件使用的字段名是'image'，与前端append的key匹配
app.post('/user/validate/upload-profile-image', upload.single('image'), (req, res) => {
  console.log('上传的文件:', req.file);
  console.log('附带的ID:', req.body.id);
  // 后续业务逻辑
});

额外排查点 #

• 确认API_BASE_URL配置正确，开发环境需确保服务端开启CORS支持
• 检查ImagePicker返回的image.uri有效性（iOS为file://开头，Android为content://或file://开头）
• 可在Axios请求中添加onUploadProgress监听上传进度，确认请求是否正常发送

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