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

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

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

前言

最近用vue寫上傳的時候，遇到一個需求就是頁面上展示上傳的進(jìn)度條，之后寫過一次，但是用的是假交互，直接從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文件夾內(nèi)寫接口的地方引用

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

接著在你的vue文件內(nèi)，引入upload方法在上傳時調(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;
            });

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

總結(jié)

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

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

您可能感興趣的文章:

相關(guān)文章

vue+iview動態(tài)渲染表格詳解
這篇文章主要為大家詳細(xì)介紹了vue+iview動態(tài)渲染表格的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-03-03
vue?cesium加載點(diǎn)與定位到指定位置的實(shí)現(xiàn)方法
Cesium是一個用于創(chuàng)建高性能、跨平臺的3D地球和地圖的開源JavaScript庫,它提供了許多功能,包括地理空間數(shù)據(jù)可視化、地理定位和地圖導(dǎo)航等,這篇文章主要介紹了vue?cesium加載點(diǎn)與定位到指定位置,需要的朋友可以參考下
2024-03-03
詳解如何在nuxt中添加proxyTable代理
這篇文章主要介紹了詳解如何在nuxt中添加proxyTable代理，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-08-08
詳解vue項(xiàng)目中使用vuedraggable
這篇文章主要介紹了vue項(xiàng)目中使用vuedraggable,本文給大家介紹了錯誤問題分析及解決方法，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-05-05
Vue3捕獲和處理不同層級的異常/錯誤的有效方法
項(xiàng)目中如果沒有對異常做處理,可能導(dǎo)致應(yīng)用崩潰或顯示報錯信息影響用戶體驗(yàn),因此需要對不同層級的錯誤進(jìn)行捕獲,所以本文給大家介紹了Vue3捕獲和處理不同層級的異常/錯誤的有效方法,需要的朋友可以參考下
2025-01-01
Vue3中各種靈活傳遞數(shù)據(jù)的方式小結(jié)
Vue 3 提供了多種數(shù)據(jù)傳遞的方式,讓我們的組件之間可以盡情地交流,接下來,我們就直接一個個來看,這些方式都是怎么工作的,感興趣的小伙伴跟著小編一起來看看吧
2024-07-07
Vue+Video.js實(shí)現(xiàn)視頻抽幀并返回抽幀圖片Base64
這篇文章主要為大家詳細(xì)介紹了Vue如何利用Video.js實(shí)現(xiàn)視頻抽幀并返回抽幀圖片Base64,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解下
2024-01-01
vue之computed的緩存特性
這篇文章主要介紹了vue之computed的緩存特性,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-11-11
vue實(shí)現(xiàn)公告消息橫向無縫循環(huán)滾動
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)公告消息橫向無縫循環(huán)滾動，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-04-04
使用vue實(shí)現(xiàn)點(diǎn)擊按鈕滑出面板的實(shí)現(xiàn)代碼
這篇文章主要介紹了使用vue實(shí)現(xiàn)點(diǎn)擊按鈕滑出面板的實(shí)現(xiàn)代碼，非常不錯，具有參考借鑒價值，需要的朋友參考下
2017-01-01