Vue axios發送請求的過程中,可以使用FormData發送form表單,但是使用FormData時,需要加上headers來設置Content-type。這里介紹FormData的使用方法,并講解headers的設置。
//創建FormData對象
let formData = new FormData();
formData.append('username', 'user');
formData.append('password', '123456');
//創建axios實例
let instance = axios.create({
baseURL: 'http://localhost:8080/api',
});
//設置請求頭
instance.defaults.headers.post['Content-Type'] = 'multipart/form-data';
//發送請求
instance.post('/login', formData).then(response =>{
console.log(response);
}).catch(error =>{
console.log(error);
});
上面的代碼中,首先創建了一個FormData對象,并向其中添加了兩個鍵值對。接著創建了一個axios實例,并設置了請求頭的Content-Type為multipart/form-data。最后使用axios的post方法發送了請求,其中的formData作為參數傳遞給了post方法。
在實際項目中,可能需要上傳多個文件,并且需要攜帶其他參數。可以使用下面的代碼來實現:
//創建FormData對象
let formData = new FormData();
formData.append('username', 'user');
formData.append('password', '123456');
//添加文件
let files = [...document.getElementById('fileInput').files];
for(let i in files) {
formData.append(`file${i}`, files[i]);
}
//創建axios實例
let instance = axios.create({
baseURL: 'http://localhost:8080/api',
});
//設置請求頭
instance.defaults.headers.post['Content-Type'] = 'multipart/form-data';
//發送請求
instance.post('/upload', formData).then(response =>{
console.log(response);
}).catch(error =>{
console.log(error);
});
上面的代碼中,首先創建了一個FormData對象,并向其中添加了兩個鍵值對。接著使用document.getElementById獲取到一個文件選擇框的DOM節點,使用files屬性獲取到所有選擇的文件,然后遍歷添加到formData中。最后發送請求。
需要注意的是,使用FormData上傳文件時,請求頭的Content-Type應該設置為multipart/form-data。另外要注意的是,對于大文件,服務器可能需要一些時間來接收和處理上傳的文件,這時候應該加入一些進度條來提醒用戶。
總結:Vue axios請求中,可以使用FormData來發送form表單,需要在請求頭中設置Content-Type為multipart/form-data。FormData可以用于上傳文件,也可以上傳多個文件和其他參數。為了用戶體驗,應該加入進度條來提醒用戶上傳的進度。