vue+axios實現(xiàn)文件上傳的實時進度條
更新時間：2024年01月23日 08:26:59 作者：盧老師和馬老師
最近用vue寫上傳的時候,遇到一個需求就是頁面上展示上傳的進度條,之后寫過一次,但是用的是假交互,直接從0-100,今天分享一下用axios自帶的onUploadProgress來完成這個小需求,感興趣的朋友可以參考下
前言
最近用vue寫上傳的時候，遇到一個需求就是頁面上展示上傳的進度條，之后寫過一次，但是用的是假交互，直接從0-100，今天分享一下用axios自帶的onUploadProgress來完成這個小需求。
封裝
我們需要封裝一下axios
export function uploadProgress(type, url, req, progress, timeout, headers) {
let h = headers || {
'Content-Type': 'application/json',
BsmAjaxHeader: true,
}
const flag = url.includes('forward')
h = setHeaderData(h, flag)
const r = req || {}
return axios({
url: `paas-web${url}`,
method: type,
data: r,
headers: h,
timeout,
onUploadProgress: progress,
})
}
拿著這個方法在api文件夾內寫接口的地方引用
upload(req, back) {
return uploadProgress(
'POST',
'/api/XXX/XXX',
req,
back
)
},
接著在你的vue文件內，引入upload方法在上傳時調用
this.upload(params, (progress) => {
const progress1 = `${(
(progress.loaded / progress.total) *
100
).toFixed(2)}`;
// 這里把值賦給data里的變量
this.percentage = +progress1;
})
.then((res) => {
if (res.data.code === 200) {
// 做相應的操作
} else {
// 做相應的操作
}
})
.finally(() => {
//這里要把值賦null 重置,也可以根據(jù)實際情況邏輯去定
this.percentage = null;
});
這個回調里面的progress就是返回的大小,需要自己拿到.loaded,.total計算一下
總結
我覺得重點在axios的onUploadProgress,具體去看axios官網怎么介紹這個api的,最后希望能幫助到各位,有什么錯誤地方也請評論指出
以上就是vue+axios實現(xiàn)文件上傳的實時進度條的詳細內容，更多關于vue+axios實時進度條的資料請關注腳本之家其它相關文章！
相關文章
vue使用element-resize-detector監(jiān)聽元素寬度變化方式
這篇文章主要介紹了vue使用element-resize-detector監(jiān)聽元素寬度變化方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要為大家詳細介紹了vue2.x集成百度UEditor富文本編輯器的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-09-09
Vue一個動態(tài)添加background-image的實現(xiàn)
這篇文章主要介紹了Vue一個動態(tài)添加background-image的實現(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
pinia是vue3官方的狀態(tài)管理工具,當然vue2也可以用,vue2中的狀態(tài)管理工具是vuex,vue3中不再使用vuex,推薦使用的是pinia,和vuex差不多,但比vuex更方便、更強、更好,下面這篇文章主要給大家介紹了關于Vue3之Pinia狀態(tài)管理的相關資料,需要的朋友可以參考下2022-11-11
Vue 實現(xiàn)復制功能,不需要任何結構內容直接復制方式
今天小編就為大家分享一篇Vue 實現(xiàn)復制功能,不需要任何結構內容直接復制方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了詳解如何在Vue里建立長按指令，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要為大家詳細介紹了Vue3中使用dataV報錯問題的解決方法,文中的示例代碼講解詳細,具有一定的學習價值,感興趣的小伙伴可以跟隨小編一起學習一下2023-11-11
這篇文章主要為大家介紹了一些Vue.js表單控件綁定示例盤點，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07
這篇文章主要為大家詳細介紹了bootstrap vue.js實現(xiàn)tab效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
這篇文章主要介紹了封裝一下vue中的axios，本文通過示例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2020-02-02