React+Axios多文件上传问题：Express接收字段异常

问题描述 #

使用React+Express实现图片上传功能，Postman测试可正常上传，但React应用上传时，Express服务端收到的文件字段为'images[]'而非预期的images，导致无法正常处理。

Postman上传后服务端接收数据（正常） #

[Object: null prototype] {
  images: {
    name: 'Screenshot 2023-08-11 171018.png',
    data: <Buffer 89  ... 331059 more bytes>,
    size: 331109,
    encoding: '7bit',
    tempFilePath: '',
    truncated: false,
    mimetype: 'image/png',
    md5: '6be5bdc5634eb2db7642e278e1682b97',
    mv: [Function: mv]
  }
}

React上传后服务端接收数据（异常） #

[Object: null prototype] {
  'images[]': {
    name: 'WIN_20200608_07_06_22_Pro.jpg',
    data: <Buffer f0 ... 196388 more bytes>,
    size: 196438,
    encoding: '7bit',
    tempFilePath: '',
    truncated: false,
    mimetype: 'image/jpeg',
    md5: 'ba567ce8ff2e8b0b987f4088ca9a3306',
    mv: [Function: mv]
  }
}

问题原因 #

1. Axios序列化行为：直接将FileList（event.target.files返回的类数组对象）放入普通对象传递给Axios时，Axios默认会为类数组类型的字段添加[]后缀，标记其为数组类型。
2. 手动设置Content-Type干扰：手动指定'Content-Type': 'multipart/form-data'会阻止Axios自动生成正确的表单边界（boundary），导致数据解析格式异常。

解决方法 #

1. 使用FormData构建上传数据（核心修复） #

改用浏览器原生FormData对象包装所有上传数据，确保表单格式与Postman一致：
修改context中的createProduct函数：

const createProduct = (title, company, category, subcategory, description, images) => async (event) => {
  dispatch({ type: CREATE_PRODUCT_BEGIN });
  event.preventDefault();
  
  // 初始化FormData
  const formData = new FormData();
  // 添加普通字段
  formData.append('title', title);
  formData.append('company', company);
  formData.append('category', category);
  formData.append('subcategory', subcategory);
  formData.append('description', description);
  
  // 遍历文件列表，逐个添加到FormData
  for (let i = 0; i < images.length; i++) {
    formData.append('images', images[i]);
  }
  
  try {
    const response = await axios.post(`${products_url}`, formData, {
      withCredentials: true,
      // 移除手动设置的Content-Type，让Axios自动处理
      headers: {
        'Access-Control-Allow-Origin': '*'
      },
    });
    const product = response.data.order;
    dispatch({ type: CREATE_PRODUCT_SUCCESS, payload: product });
  } catch (error) {
    dispatch({
      type: CREATE_PRODUCT_ERROR,
      payload: error.response.data.msg,
    });
  }
};

2. 优化FileList存储（可选） #

将FileList转换为真实数组存入state，方便后续遍历处理：

const updateImagesInfo = (event) => {
  const files = Array.from(event.target.files); // 转换为数组
  dispatch({ type: UPDATE_IMAGES_INFO, payload: files });
};

3. 服务端兼容（临时方案） #

若无法立即修改前端，可在Express端兼容两种字段名：

const images = req.files['images[]'] || req.files.images;

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