axios同时上传多个文件

一个很普通的场景，前端一次性选择多个文件上传到后端。

需要注意的是使用FormData.append把多个文件添加到一个键上，设置请求header的content-type为mutilpart/form-data

先说正确的步骤：

1.前端使用input标签配合oncahnge事件获取文件

<input type="file" name="file" id="file" multiple/>

let file = document.getElementById("file");
file.addEventListener("change", (event) => {
    console.info(event.target.files); // 获取文件
});

2.使用FormData结合axios向后端发送请求

let files = event.target.files;
let formData = new FormData();
files = Array.from(files); // files是类数组，需要先转为数组
files.forEach((file) => {
    formData.append("file", file);
});
axios
    .post(url, formData, {
        headers: { "Content-Type": "multipart/form-data" }
    })
    .then(console.info)
    .catch(console.error);

3.后端使用MutilpartFile []file接收多个文件

file参数对应前端FormData中存放文件的键file。

注意事项：

1.向后端传递文件类型的参数，需要把文件放入formData中，FormData使用键值对存放数据，如formData.set("key", value)；value的类型只能是string、boolean、blob；

直接向FormData中存放数组和对象是无效的，那么多个文件是不能用set放在一个键上的，可以使用FormData.append方法，该方法也是接收键值对，但是可以多次向一个键上添加数据，后面的不会覆盖前面的，而是组合成一个list。

2.input.files是类数组，如果迭代files可以先用Array.from转为数组。

3.向后端发请求传递文件时需要设置header的content-type为multipart/form-data。

axios配置的优先级：

1.   在lib.default.js找到的库的默认值

2.   然后是全局的defaults配置

axios.default.baseURL = "https://jsonplaceholder.typicode.com"

3.   然后是实例的defaults属性

const instance = axios.create({   

      baseURL: 'https://jsonplaceholder.typicode.com' 

});

4.   最后是请求的config参数

instance.get(url, config).then(res => {

})