Vue3通过axios提交FormData上传多文件至Express后端失败如何解决

1. Proxy结构是否正确？ #

你打印的Proxy结构是正常的：Vue3的ref会对数组类型的响应式数据做代理包装，[[Target]]对应的Array就是实际存储的File对象列表，直接访问files.value即可拿到真实的文件数组，结构没有问题。

2. 原代码失效原因 #

FormData.append()方法的第二个参数仅支持Blob/File/字符串类型，你直接传入整个files.value数组时，浏览器会自动将数组转为[object File],[object File]格式的字符串，并非传输文件二进制内容，因此后端无法解析到文件，导致req.files为undefined。
你修改为files.value[0]后是传入单个File对象，符合参数要求，因此单文件上传可以正常运行。

3. 多文件上传实现方案 #

遍历files.value中的所有File对象，重复向FormData中追加同名字段files即可，修改onSubmit中的FormData构造逻辑：

const onSubmit = async () => {
  try {
    const formData = new FormData()
    // 遍历所有选中文件逐个追加
    files.value.forEach(file => {
      formData.append('files', file)
    })
    await axiosPostFormData(formData)
  } catch(e) {
    console.log(e)
  }
}

额外注意事项 #

• 你封装的axiosPostFormData方法不要手动设置Content-Type: multipart/form-data请求头，浏览器会自动为FormData类型的请求生成带正确分隔符的请求头，手动设置会导致分隔符缺失，后端解析失败。
• 确保Express端的上传中间件（如multer）配置匹配：使用multer时需要配置为multer().array('files', 允许的最大上传数量)，才能正确接收同字段名的多个文件。

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