一個很普通的場景,前端一次性選擇多個文件上傳到后端。
需要注意的是使用FormData.append把多個文件添加到一個鍵上,設置請求header的content-type為mutilpart/form-data
先說正確的步驟:
1.前端使用input標簽配合oncahnge事件獲取文件
1 <input type="file" name="file" id="file" multiple/>
1 let file = document.getElementById("file"); 2 file.addEventListener("change", (event) => { 3 console.info(event.target.files); // 獲取文件 4 });
2.使用FormData結合axios向后端發送請求
1 let files = event.target.files; 2 let formData = new FormData(); 3 files = Array.from(files); // files是類數組,需要先轉為數組 4 files.forEach((file) => { 5 formData.append("file", file); 6 }); 7 axios 8 .post(url, formData, { 9 headers: { "Content-Type": "multipart/form-data" } 10 }) 11 .then(console.info) 12 .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 => {
})