ReactNative使用axios通过FormData上传多张图片出现后端报错如何解决

问题原因排查 #

• 手动设置Content-Type头错误：使用FormData提交multipart请求时，不要手动写死Content-Type: multipart/form-data，React Native的请求库会自动生成带boundary分隔符的请求头，手动指定会丢失分隔符参数，导致后端无法拆分表单字段和文件内容，这是本次报错的核心原因。
• 文件名格式非法：直接将new Date()作为文件名，该值是Date对象，序列化后会包含空格、冒号等特殊字符，且没有带.jpg后缀，后端校验文件格式时会识别失败。
• MIME类型写法不规范：部分服务端对图片MIME校验严格，image/jpg是非标准写法，标准应为image/jpeg。

修正代码示例 #

const availabilityData = new FormData();

availabilityData.append('name', title);
availabilityData.append('foodType', foodType);
availabilityData.append('availability_type', category);
availabilityData.append('description', description);
availabilityData.append('total_quantity', quantity);
availabilityData.append('cooked_time', madeOn);
availabilityData.append('best_before', bestBefore);
availabilityData.append('storage_description', storageDesc);
availabilityData.append('latitude', fromLocation.latitude);
availabilityData.append('longitude', fromLocation.longitude);
availabilityData.append('city', selectedCity);
availabilityData.append('creator_delivery_option', deliveryOption);

for (let i = 0; i < imageLoc.length; i++) {
  const newFile = {
    uri: imageLoc[i],
    type: 'image/jpeg', // 修正为标准MIME类型
    name: `upload_${Date.now()}_${i}.jpg`, // 生成合法带后缀的文件名，避免重名
  };
  availabilityData.append('files[]', newFile);
}

await axios({
  url: constants.BASE_URL + 'availability/createAvailability',
  method: 'post',
  data: availabilityData,
  headers: {
    Authorization: `UserData ${token}`,
    Accept: 'application/json',
    // 移除手动设置的Content-Type，axios自动处理
  },
})
.then(function (response) {
  Alert.alert('Availability Created Successfully');
  navigation.popToTop();
  removeAllInputs();
  setLoading(false);
})
.catch(function (error) {
  console.log(error);
  setLoading(false);
});

额外排查项 #

如果修改后仍报错，可按以下顺序检查：

• 确认Android已经申请了存储读取权限，没有权限的话无法读取content URI对应的文件内容
• 确认后端接收文件的字段名确实是files[]，如果后端要求的是其他字段名需要对应修改
• 部分低版本React Native的axios对FormData处理有兼容问题，可替换为fetchAPI测试是否正常

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