React.js中如何用FormData上传图片数组及解决后端req.body为空问题

1. 多图片数组追加到FormData的正确写法 #

你当前的代码存在两个致命错误，直接导致后端拿不到数据：

• 直接把整个values.images数组传给formData.append()是无效的。FormData的append方法会自动把非File/Blob/字符串类型的参数转成字符串，传整个File数组最终会被序列化成[object File]拼接的文本，根本不会传递实际的文件二进制流。
• 手动设置Content-Type: multipart/form-data会丢失格式必需的boundary分隔符。浏览器会根据请求内容自动生成带boundary的请求头，手动写死这个头会导致后端无法拆分请求字段，直接返回空的req.body。

修正后的onSubmit逻辑：

const onSubmit = async (e) => {
  // 如果是原生表单绑定的提交方法，需要加这行阻止默认页面跳转
  e.preventDefault();
  const formData = new FormData(); 
  
  // 遍历图片数组，逐个把File对象按统一字段名追加
  values.images.forEach((file) => {
    formData.append("images", file);
  });

  // 普通文本字段按原有逻辑追加即可
  formData.append("title", values.title);
  formData.append("price", values.price);
  formData.append("quantity", values.quantity);
  formData.append("id", id);

  try {
    const res = await axios.post(
      "//localhost:4000/products/saveProduct",
      formData,
      {
        // 删掉手动设置的Content-Type头，让axios自动生成正确的头信息
        headers: {}
      }
    )
  } catch (err) {
    console.log('提交失败', err)
  }
}

2. 其他会导致后端req.body为空的排查点 #

• 确认values.images存储的是原始File实例：你在handleChange里给文件对象挂临时预览URL的操作，不要改变文件本身的类型。建议把预览URL存在单独的组件状态里，不要直接修改File对象本身，避免序列化的时候出问题。你现在写的return Array.from(e.target.files)的逻辑是对的，返回的就是标准File数组。
• 确认后端配置了multipart请求的解析中间件：如果你的后端是Express/Koa这类Node服务，默认的express.json()中间件只能解析application/json格式的请求，碰到multipart格式的请求会完全识别不了。需要搭配multer这类专门处理文件上传的中间件，配置完成后，普通文本字段会自动挂载到req.body，上传的多文件会挂载到req.files上。
• 提交前可以在前端打印下formData的内容确认：用console.log([...formData.entries()])能看到所有追加的字段，确认images字段对应的每个条目都是File类型的对象，没有变成字符串。

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