快捷導(dǎo)航

vue+axios實(shí)現(xiàn)文件上傳的實(shí)時(shí)進(jìn)度條

更新時(shí)間：2024年01月23日 08:26:59 作者：盧老師和馬老師

最近用vue寫(xiě)上傳的時(shí)候,遇到一個(gè)需求就是頁(yè)面上展示上傳的進(jìn)度條,之后寫(xiě)過(guò)一次,但是用的是假交互,直接從0-100,今天分享一下用axios自帶的onUploadProgress來(lái)完成這個(gè)小需求,感興趣的朋友可以參考下

前言

最近用vue寫(xiě)上傳的時(shí)候，遇到一個(gè)需求就是頁(yè)面上展示上傳的進(jìn)度條，之后寫(xiě)過(guò)一次，但是用的是假交互，直接從0-100，今天分享一下用axios自帶的onUploadProgress來(lái)完成這個(gè)小需求。

封裝

我們需要封裝一下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,
  })
}

拿著這個(gè)方法在api文件夾內(nèi)寫(xiě)接口的地方引用

  upload(req, back) {
    return uploadProgress(
      'POST',
      '/api/XXX/XXX',
      req,
      back
    )
  },

接著在你的vue文件內(nèi)，引入upload方法在上傳時(shí)調(diào)用

    this.upload(params, (progress) => {
              const progress1 = `${(
                (progress.loaded / progress.total) *
                100
              ).toFixed(2)}`;
              // 這里把值賦給data里的變量
              this.percentage = +progress1;
            })
            .then((res) => {
              if (res.data.code === 200) {
                   // 做相應(yīng)的操作
              } else {
                  //  做相應(yīng)的操作
              }
            })
            .finally(() => {
                 //這里要把值賦null 重置,也可以根據(jù)實(shí)際情況邏輯去定
              this.percentage = null;
            });

這個(gè)回調(diào)里面的progress就是返回的大小,需要自己拿到.loaded,.total計(jì)算一下

總結(jié)

我覺(jué)得重點(diǎn)在axios的onUploadProgress,具體去看axios官網(wǎng)怎么介紹這個(gè)api的,最后希望能幫助到各位,有什么錯(cuò)誤地方也請(qǐng)?jiān)u論指出

以上就是vue+axios實(shí)現(xiàn)文件上傳的實(shí)時(shí)進(jìn)度條的詳細(xì)內(nèi)容，更多關(guān)于vue+axios實(shí)時(shí)進(jìn)度條的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

相關(guān)文章

vue使用element-resize-detector監(jiān)聽(tīng)元素寬度變化方式
這篇文章主要介紹了vue使用element-resize-detector監(jiān)聽(tīng)元素寬度變化方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-12-12
vue2.x集成百度UEditor富文本編輯器的方法
這篇文章主要為大家詳細(xì)介紹了vue2.x集成百度UEditor富文本編輯器的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-09-09
Vue一個(gè)動(dòng)態(tài)添加background-image的實(shí)現(xiàn)
這篇文章主要介紹了Vue一個(gè)動(dòng)態(tài)添加background-image的實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-03-03
帶你熟練掌握Vue3之Pinia狀態(tài)管理
pinia是vue3官方的狀態(tài)管理工具,當(dāng)然vue2也可以用,vue2中的狀態(tài)管理工具是vuex,vue3中不再使用vuex,推薦使用的是pinia,和vuex差不多,但比vuex更方便、更強(qiáng)、更好,下面這篇文章主要給大家介紹了關(guān)于Vue3之Pinia狀態(tài)管理的相關(guān)資料,需要的朋友可以參考下
2022-11-11
Vue 實(shí)現(xiàn)復(fù)制功能,不需要任何結(jié)構(gòu)內(nèi)容直接復(fù)制方式
今天小編就為大家分享一篇Vue 實(shí)現(xiàn)復(fù)制功能,不需要任何結(jié)構(gòu)內(nèi)容直接復(fù)制方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-11-11
詳解如何在Vue里建立長(zhǎng)按指令
這篇文章主要介紹了詳解如何在Vue里建立長(zhǎng)按指令，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-08-08
Vue3使用dataV報(bào)錯(cuò)問(wèn)題的解決方法
這篇文章主要為大家詳細(xì)介紹了Vue3中使用dataV報(bào)錯(cuò)問(wèn)題的解決方法,文中的示例代碼講解詳細(xì),具有一定的學(xué)習(xí)價(jià)值,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2023-11-11
Vue.js表單控件綁定示例盤點(diǎn)
這篇文章主要為大家介紹了一些Vue.js表單控件綁定示例盤點(diǎn)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-07-07
bootstrap vue.js實(shí)現(xiàn)tab效果
這篇文章主要為大家詳細(xì)介紹了bootstrap vue.js實(shí)現(xiàn)tab效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-02-02
封裝一下vue中的axios示例代碼詳解
這篇文章主要介紹了封裝一下vue中的axios，本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-02-02