React+TypeScript多图片上传API参数格式异常问题排查

你遇到的问题是因为直接通过普通对象传递文件数组时，axios会自动将数组字段转换为multipleImages[]的形式，且普通对象无法正确处理二进制文件传输。正确做法是使用FormData构建请求体，这也是上传文件的标准方式。

步骤1：修正前端图片收集逻辑 #

原循环存在逻辑错误，需确保最终拿到的是File对象数组：

let imageFile : any = [];
const images = payload.multipleImages;
// 修正循环取值逻辑，取interior数组内的元素
for(let i = 0; i < images.interior.length ; i++){
    imageFile.push(images.interior[i]);
}
payload.multipleImages = imageFile;
console.log('images',payload.multipleImages);
const data = { ...values, ...payload };
dispatch(vehicleActions.postVehicle(data));

更简洁的写法：

payload.multipleImages = payload.multipleImages.interior;
const data = { ...values, ...payload };
dispatch(vehicleActions.postVehicle(data));

步骤2：修改API请求为FormData格式 #

将请求体改为FormData，手动添加字段与文件：

const url = `/vehicles/dealer/vehicle/add`;
const formData = new FormData();

// 添加普通文本字段
formData.append('price', data.price);
formData.append('manufactureYear', data.manufactureYear);
formData.append('kiloMeters', data.kiloMeters);
formData.append('plateNumber', data.plateNumber);
formData.append('fuelType', data.fuelType);

// 循环添加图片数组，使用统一字段名`multipleImages`
data.multipleImages.forEach(image => {
  formData.append('multipleImages', image);
});

// 发送请求并指定正确的Content-Type
return axiosClient().post(url, formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
});

原理说明 #

• 上传二进制文件必须使用multipart/form-data编码，FormData会自动处理该编码格式。
• 向FormData中用同一字段名多次追加文件时，后端框架（如Express+Multer、Spring Boot）会自动解析为数组，无需手动添加[]后缀。
• 原普通对象传参方式中，axios会将数组字段序列化为key[]格式，既不符合后端预期，也无法正确传输二进制文件。

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