如何在React中上传多张图片并发送至Node服务端

问题根因 #

• 对react-hook-form返回的多文件表单值结构理解错误，images对象下只有multipleImages一个对应多文件输入的字段，其值本身就是FileList类数组对象，不需要用Object.keys遍历外层的images对象
• 循环追加FormData的逻辑错误：原代码中imageArray实际是[FileList]结构，遍历过程中仅会执行1次，只能追加到第一张图片
• 多文件上传的FormData字段命名需要符合后端接收规范，Node端常用的multer中间件默认支持接收同一个字段名多次追加的数组格式

修正后的代码 #

const {register, handleSubmit} = useForm() 

const onSubmit = async (formValue) => {
  // 直接获取多文件输入返回的FileList对象
  const fileList = formValue.multipleImages
  const formData = new FormData()

  // 遍历FileList追加所有文件，字段名和后端接收参数保持一致即可
  Array.from(fileList).forEach(file => {
    // 如果Node端用multer的array('images')配置接收，保持字段名为images即可
    formData.append('images', file)
  })   
  await uploadMultipleImages(formData)
}

return (
  <>
    <form onSubmit={handleSubmit(onSubmit)}>
      {/* 补充required校验避免空提交，可按需删除 */}
      <input type='file' multiple required {...register('multipleImages')} />
      <button type='submit' >Upload multiple images</button>
    </form>
  </>
)

额外注意事项 #

• 如果你的Node端是用multer处理文件上传，对应路由的配置需要改为upload.array('images', 最大上传数量)，不要和单文件配置upload.single('image')混用
• 发起上传请求时要保证请求头的Content-Type是multipart/form-data，如果用axios/fetch，直接传入FormData实例会自动设置该请求头，不要手动覆盖
• 如果后端框架要求显式标注数组字段，将append的第一个参数改为images[]即可

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