axios同時上傳多個文件


一個很普通的場景,前端一次性選擇多個文件上傳到后端。

需要注意的是使用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 => {
})

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM