前后端上传文件夹接收不到文件

Question

使用vue 实现多文件上传功能，后端一直接收不到文件参数，其他的参数没有问题，当使用form表单直接提交能接收到文件参数。formData的参数名也换过好几次了，有files，files[]，反正就是传不到后端，换成fromData也请求不到，和我传的loadData没有关系

Answer 1

以下内容由CHATGPT及阿里嘎多学长共同生成、有用望采纳：

---

根据您提供的截图内容，我将尝试帮助您解决在使用Vue.js和axios进行文件上传时，后端接收不到文件参数的问题。以下是一些可能的问题和解决方案：

1. 检查前端代码

在您的前端代码中，确保您正确地创建了FormData对象，并且正确地添加了文件和其他参数。

问题代码示例（来自截图）:

let formData = new FormData();
formData.append('userPhone', uploadData.userPhone);
formData.append(fileRemark', uploadData.fileRemark); // 这里缺少了引号
for(let file of uploadData.files) {
  formData.append('files[]', file);
}

修正后的代码:

let formData = new FormData();
formData.append('userPhone', uploadData.userPhone);
formData.append('fileRemark', uploadData.fileRemark); // 修正引号
uploadData.files.forEach(file => {
  formData.append('files[]', file);
});

2. 检查后端代码

在您的后端代码中，确保您的Spring Boot控制器方法正确地接收了文件参数。

问题代码示例（来自截图）:

@PostMapping("/upload/dir")
public CommonResult uploadDir(@RequestParam(value = "files") MultipartFile[] files,
                              @RequestParam String userPhone,
                              @RequestParam(value = "fileRemark", required = false) String remark) throws IoException {
    // ...
}

注意: 您的@RequestParam注解中的value属性应该与前端发送的字段名匹配。如果前端发送的是files[]，则后端也应该使用相同的字段名。

3. 检查axios配置

确保axios的请求配置正确，特别是Content-Type不应手动设置，因为当使用FormData时，axios会自动设置为multipart/form-data。

问题代码示例（来自截图）:

const config = {
  headers: {
    'Content-Type': 'multipart/form-data' // 这行应该去掉
  }
}

修正后的代码:

const config = {
  // headers: { 'Content-Type': 'multipart/form-data' } // 不需要这行
}

4. 检查网络请求

使用浏览器的开发者工具（如Chrome的DevTools）检查网络请求，确保文件数据被正确发送。

5. 参考资料

• MDN Web Docs - FormData
• Axios GitHub - axios
• Vue.js 文件上传

6. 示例代码实现

以下是一个简单的Vue.js组件示例，展示如何使用axios上传文件：

<template>
  <div>
    <input type="file" multiple @change="handleFiles" />
    <button @click="uploadFiles">上传文件</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      files: []
    };
  },
  methods: {
    handleFiles(event) {
      this.files = event.target.files;
    },
    async uploadFiles() {
      const formData = new FormData();
      formData.append('userPhone', '1234567890');
      formData.append('fileRemark', 'Example remark');
      this.files.forEach(file => {
        formData.append('files[]', file);
      });

      try {
        const response = await axios.post('http://localhost:8085/upload/dir', formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        });
        console.log(response.data);
      } catch (error) {
        console.error('Error uploading files:', error);
      }
    }
  }
};
</script>

请根据上述建议检查和调整您的代码，希望这能帮助您解决问题。如果问题仍然存在，请提供更多的信息，以便进一步分析。