1. 程式人生 > 實用技巧 >vue+uniapp實現多工併發下載檔案 | 斷點續下, 任務列表, 多工併發限制

vue+uniapp實現多工併發下載檔案 | 斷點續下, 任務列表, 多工併發限制

一、外掛簡介

zhimi-downloadManager(智密 - 多工下載管理外掛)是一個支援多工多併發下載,支援多/單任務管理,並且實時反饋任務下載進度的uniapp原生外掛。
平臺支援:Android、IOS


二、效果預覽
在App端測試效果如下:

體驗DEMO(安卓瀏覽器掃碼下載)


三、開始使用

(1): 引入外掛

首先建立工程,新增完原生外掛之後,需要引入外掛

var downloadManager = uni.requireNativePlugin('zhimi-downloadManager')

具體的API在外掛市場的API文件

中可以查閱,有定製需求或bug提交的也可以自行聯絡客服微信(zhimitec)

(2): 監聽任務

建立任務之前,我們需要全域性監聽任務進度變化回撥

downloadManager.onDownloadChangCallback(downloadTask => {
  // 下載地址: downloadTask.url
  // 檔案大小: downloadTask.expectedSize
  // 已下大小: downloadTask.receivedSize
  // 下載速度: downloadTask.speed
  // 下載狀態: downloadTask.state 0預設 1等待 2下載中 3暫停 4下載完成 5下載錯誤
  // 儲存路徑: downloadTask.filePath   // 檔名: downloadTask.filename   console.log(downloadTask.url + ' has been change') })

(3): 建立任務

對於 zhimi-downloadManager 來說,下載任務僅僅需要1個下載路徑,如果你需要自定義檔名,傳入fileName即可。
假設我們需要下載QQ的安裝包:https://dldir1.qq.com/qqfile/QQforMac/QQ_6.7.0.dmg,只需要這樣的一段程式碼即可

// 這裡的fileName可傳可不傳
downloadManager.downloadData({ url: 'https://dldir1.qq.com/qqfile/QQforMac/QQ_6.7.0.dmg', fileName: 'macqq.dmg' })

僅僅一個方法,zhimi-downloadManager就會自動記錄任務列表,開始下載任務,並且通過上面監聽的回撥返回任務下載進度


(4): 重新整理任務列表

下載的功能實現了,這時候我們還需要回顯給使用者當前任務列表,在zhimi-downloadManager中,這一切變得非常簡單,只需要呼叫以下程式碼即可直接返回任務列表(包括下載狀態、進度等)

downloadManager.allDownloadsCallback(({ urls }) => {
  urls = [{
    receivedSize // 進度
    expectedSize // 大小
    speed        // 速度
    targetURL    // 地址
    state        // 下載狀態 0預設 1等待 2下載中 3暫停 4下載完成 5下載錯誤
    url          // 下載地址
    filePath     // 儲存地址
    filename     // 檔名
  }]
})

(5): 更多方法
對於所有任務的操作以及單個任務的操作,zhimi-downloadManager都提供對應的api,在此僅做列舉,具體使用方法參考外掛市場內api文件說明https://ext.dcloud.net.cn/plugin?id=2877,有定製需求或bug提交的也可以自行聯絡客服微信(zhimitec)。

downloadManager.setDownloadingMaxNum // 設定任務併發數
downloadManager.startAllDownloads // 開始所有任務
downloadManager.cancelAllDownloads // 暫停所有任務
downloadManager.removeAllData // 刪除所有任務
downloadManager.downloadData // 建立新的下載任務
downloadManager.downloadData // 開始單個任務
downloadManager.cancelData // 暫停單個任務
downloadManager.removeData // 暫停單個任務