在React+Node项目中使用Multer实现一次性上传多张图片

现有代码问题点 #

• 客户端提交逻辑未将选中的图片文件添加到FormData实例中
• 变量拼写错误：FormData实例命名为formData（驼峰格式），调用时误写为formdata（全小写）
• 前后端表单字段名不匹配：前端文件输入框绑定的字段是multipleImages，后端Multer接收配置的字段是imagess，二者不一致导致无法解析文件
• React Hook Form 未针对多文件上传配置valueAsArray，无法正确返回文件数组

客户端修正代码 #

提交逻辑 #

const {register, handleSubmit} = useForm() 
const onSubmit = (data) => {
  const formData = new FormData()
  // 遍历选中的多图文件，逐个添加到FormData
  if (data.multipleImages?.length) {
    Array.from(data.multipleImages).forEach(file => {
      formData.append('multipleImages', file)
    })
  }
  // 携带正确的请求头提交
  axios.post(`${url}/uploadMultiple`, formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  })
}

表单代码 #

<form onSubmit={handleSubmit(onSubmit)}>
  {/* 注册时添加valueAsArray配置，确保返回文件数组 */}
  <input type='file' multiple {...register('multipleImages', { valueAsArray: true })} />
  <button type='submit'>Upload multiple images</button>
</form>

服务端修正代码 #

// 第一个参数与前端上传的文件字段名保持一致，第二个参数为最大允许上传数量
route.post('/uploadMultiple', upload.array('multipleImages', 10), (req, res) => {
  console.log(req.files) // 可正常打印所有上传的文件信息
  // 后续业务逻辑处理
})

补充注意事项 #

• 确认Multer初始化配置的dest或storage参数正确，服务端对目标文件夹有写入权限
• 可在Multer配置中添加文件类型、大小限制，过滤非法上传请求

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