最近有一個新需求,要求在前端實現(xiàn)真實的進度條展示,我首先想到了?Ant Design Vue的upload組件,在antd官網(wǎng)里upload組件不僅有上傳功能,并且還附帶了Progress?進度條組件,還擁有上傳成功和失敗的兩種狀態(tài)的區(qū)分,可以說是十分貼心了,如圖

?但是很可惜這個組件上傳文件的話,你要在action里面指定你上傳的路徑,他會通過change函數(shù)傳遞你選擇的文件列表而后自動把這個文件拿到并且上傳到你給的地址中去,(也就是說你只需要給一個后端地址,其余的你選擇了文件他就會幫你上傳的)代碼如下所示,

<template>
  <a-upload-dragger
    v-model:fileList="fileList"
    name="file"
    :multiple="true"
    action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
    @change="handleChange"
    @drop="handleDrop"
  >
    <p class="ant-upload-drag-icon">
      <inbox-outlined></inbox-outlined>
    </p>
    <p class="ant-upload-text">Click or drag file to this area to upload</p>
    <p class="ant-upload-hint">
      Support for a single or bulk upload. Strictly prohibit from uploading company data or other
      band files
    </p>
  </a-upload-dragger>
</template>
<script lang="ts">
import { InboxOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import { defineComponent, ref } from 'vue';
import type { UploadChangeParam } from 'ant-design-vue';

export default defineComponent({
  components: {
    InboxOutlined,
  },
  setup() {
    const handleChange = (info: UploadChangeParam) => {
      const status = info.file.status;
      if (status !== 'uploading') {
        console.log(info.file, info.fileList);
      }
      if (status === 'done') {
        message.success(`${info.file.name} file uploaded successfully.`);
      } else if (status === 'error') {
        message.error(`${info.file.name} file upload failed.`);
      }
    };
    return {
      handleChange,
      fileList: ref([]),
      handleDrop: (e: DragEvent) => {
        console.log(e);
      },
    };
  },
});
</script>

但是我這個項目里面不僅要求上傳文件,同時還要傳遞一定的參數(shù),那就不能像他這樣直接給一個地址了,沒辦法只另辟蹊徑了.上面說過其實antd 的upload組件里面也是包含的Progress?進度條組件,那這樣的話我們剛好用它的Progress 組件就好了.

antd官網(wǎng)Progress組件示例

?接下來就是具體的操作步驟了,其實也很簡單

1.引入Progress并使用,同時給percent屬性綁定一個uploadProgress的自定義值,這個percent屬性其實就是進度條顯示的百分比,設(shè)置100就是進度條全滿,設(shè)置為0就是進度條為空.(進度條需要自己放在合適的位置)

2.調(diào)用函數(shù),手動拿取文件并發(fā)送請求,如下圖SystemImports函數(shù)其實就是一個請求函數(shù),第一個參數(shù)就是后端需要的額外參數(shù)(這個不重要,屬于我的項目的需求),第二個參數(shù)formData其實就是我們拿取到的文件并給他以formData的形式傳給后端,也就是上傳文件并獲取這一過程(這個過程不懂得可以直接搜索js原生文件上傳formData形式,我在這里就不過多贅述了)第三個參數(shù)也是最重要的參數(shù),圖中可以看到第三個參數(shù)是一個回調(diào)函數(shù),我把這個回調(diào)函數(shù)接收到的參數(shù)(progressEvent)里的(loaded)屬性和(total)進行處理后賦值給了uploadProgress.value,第一步里面percent屬性綁定的值也就是進度條的進度剛好就是uploadProgress.value.也就是說我這里處理的其實就是進度條的實時進度.

3.那為什么我可以在直接拿到第三個參數(shù)回調(diào)函數(shù)的參數(shù)值progressEvent并且直接使用呢,這樣就可以拿到實時進度了嗎,其實關(guān)鍵就在下面這一步,如圖這是我封裝好的請求函數(shù),這里有一個重要的屬性就是onUploadProgress,我將第三個參數(shù)直接賦給他了,其實這樣一來我們在上面請求函數(shù)里拿到的參數(shù)progressEvent就是該請求的一些實時信息,這個信息是會同步一直更新的 在你上傳請求結(jié)束之前.

這是axios官網(wǎng)對onUploadProgress的解釋

?

progressEvent就是獲得的當(dāng)前監(jiān)控的上傳信息,而progressEvent.loaded就是當(dāng)前請求已發(fā)送數(shù)量,progressEvent.total就是當(dāng)前請求應(yīng)該發(fā)送的總數(shù)據(jù)數(shù)量,通過相應(yīng)的處理自然可以知道當(dāng)前處理進行到百分之幾了,然后賦值給percent屬性就可以了,所以到這一步基本上就可以像圖片中那樣處理進度條了,進度條也會實時變化了.

?到了這里可能有些人試過之后發(fā)現(xiàn),進度條確實變了 但是每次都是只變動一次,從0到100就結(jié)束了,這很有可能是因為上傳速度過快,間隔過小導(dǎo)致的,建議開啟瀏覽器調(diào)試,并切換到慢速3g上傳一些較大的文件再次測試.當(dāng)時我就能看到打印了許多個86的值,(第二步的圖片里,我再處理函數(shù)里面打印了progressEvent)

以上步驟其實已經(jīng)能夠?qū)崟r顯示進度條了,其實還有一個問題需要處理,就是我們前端上傳完畢了,但是后端還需要處理時間呀,那此時我們的上傳進度是多少呢,是100%因為uploadProgress監(jiān)控的是上傳進度的完成,這就會造成我們進度條已經(jīng)100%,但是后端仍需時間處理,最后導(dǎo)致返回滯后于進度條,那這樣的話我們可以考慮給他加一個loading狀態(tài)提示數(shù)據(jù)正在處理中,從而更好的提升用戶體驗.

各位大佬你們有什么對于實施進度條的新方法或者更合適的解決方案嗎,求指導(dǎo)!!!文章來源地址http://www.zghlxwxcb.cn/news/detail-701184.html

到了這里，關(guān)于前端實現(xiàn)真實可動態(tài)變化進度條,axios+ Ant Design Vue實現(xiàn).的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！