在使用Vue開發時,我們難免會涉及到文件上傳的操作,而經常使用到的是axios庫。axiox是一個很好用的http請求工具,但是,在上傳大文件時,會出現超時的問題,需要對此做出相應的處理。
首先,我們需要明確一點,上傳文件是一個很耗時的操作,而axios默認的請求超時時間是0,即永不超時,這樣對于一些大文件上傳來說是不合適的。為了避免超時,我們可以通過以下兩種方式解決。
方法一:調整axios全局配置
axios.defaults.timeout = 10000; // 設置超時時間
上述代碼將請求超時時間設置為10秒。如果想要設置成永不超時,則需將timeout設為0。
方法二:使用axios實例進行請求
const instance = axios.create({
timeout: 10000 // 設置超時時間
});
上述代碼創建了一個新的axios實例,并將超時時間設置為10秒。在進行文件上傳時,在請求參數中加入此實例即可。
代碼如下:
const instance = axios.create({
timeout: 10000 // 設置超時時間
});
const formData = new FormData();
formData.append('file', file);
instance.post(url, formData).then((res) =>{
console.log(res);
}).catch((err) =>{
console.log(err);
});
注意,實際使用中,文件上傳時需要將文件數據轉換為FormData類型,之后再發出請求。
以上兩種方法,在大文件上傳時都可以有效避免axios超時的問題。
下一篇vue上傳截圖預覽