小程序模板網(wǎng)

微信小程序下載照片（顯示進(jìn)度條）

發(fā)布時(shí)間：2018-12-24 08:45 所屬欄目：小程序開發(fā)教程

一、downloadTask/UploadTask理解

downloadTask

  • 一個(gè)可以監(jiān)聽下載進(jìn)度變化事件，以及取消下載任務(wù)的對(duì)象
    • 本質(zhì)：對(duì)象
    • 功能一：監(jiān)聽下載進(jìn)度變化
    • 功能二：取消下載任務(wù)

UploadTask

  • 一個(gè)可以監(jiān)聽上傳進(jìn)度變化事件，以及取消上傳任務(wù)的對(duì)象
    • 本質(zhì)：對(duì)象
    • 功能一：監(jiān)聽上傳進(jìn)度變化
    • 功能二：取消上傳任務(wù)

1.1、監(jiān)聽下載進(jìn)度變化事件

downloadTask.onProgressUpdate((res) => {
  console.log('下載進(jìn)度', res.progress)
  console.log('已經(jīng)下載的數(shù)據(jù)長度', res.totalBytesWritten)
  console.log('預(yù)期需要下載的數(shù)據(jù)總長度', res.totalBytesExpectedToWrite)
})
復(fù)制代碼

1.2、取消監(jiān)聽下載進(jìn)度變化事件

DownloadTask.offProgressUpdate(function callback)
復(fù)制代碼

1.3、 監(jiān)聽 HTTP Response Header 事件

DownloadTask.onHeadersReceived(function callback)
復(fù)制代碼

1.4、 取消監(jiān)聽 HTTP Response Header 事件

DownloadTask.offHeadersReceived(function callback)
復(fù)制代碼

1.5、中斷下載任務(wù)

DownloadTask.abort()
復(fù)制代碼

二、downloadFile 下載文件理解

  • 本質(zhì)：方法
  • 功能：下載文件資源到本地
  • 返回值：downloadTask對(duì)象

success 返回的兩個(gè)參數(shù)

  • tempFilePath

    • 臨時(shí)文件路徑。
    • 如果沒傳入 filePath 指定文件存儲(chǔ)路徑，則下載后的文件會(huì)存儲(chǔ)到一個(gè)臨時(shí)文件
    • string

  • statusCode

    • 開發(fā)者服務(wù)器返回的 HTTP 狀態(tài)碼
    • number
wx.downloadFile({
  url: 'https://example.com/audio/123', 
  header:'', //HTTP 請(qǐng)求的 Header，Header 中不能設(shè)置 Referer
  filePath:'',//指定文件下載后存儲(chǔ)的路徑
  success(res) {
    // 只要服務(wù)器有響應(yīng)數(shù)據(jù)，就會(huì)把響應(yīng)內(nèi)容寫入文件并進(jìn)入 success 回調(diào)
    //業(yè)務(wù)需要自行判斷是否下載到了想要的內(nèi)容
    if (res.statusCode === 200) {
      wx.saveImageToPhotosAlbum({
        filePath: res.tempFilePath
      })
    }
  },
  fail(err){
      console.log(err)
  },
  complete(res){
      console.log(res)
  }
})

三、saveImageToPhotosAlbum 理解

  • 功能：保存圖片到系統(tǒng)相冊(cè)
wx.saveImageToPhotosAlbum({
  filePath:'',
  success(res) { 
      
  }，
  fail(err){
      
  },
  complete(res){
      
  }
})

四、代碼展示

/**
   * [downloadPhoto 下載照片]
   */
  downloadPhoto (e) {
    let imgUrl = e.currentTarget.dataset.src
    // 下載監(jiān)聽進(jìn)度
    const downloadTask = wx.downloadFile({
      url: imgUrl,
      success: function (res) {
        console.log(res)
        if (res.statusCode === 200) {
          wx.saveImageToPhotosAlbum({
            filePath: res.tempFilePath,
            success: function (res) {
              wx.showToast({
                title: '保存圖片成功'
              })
            },
            fail: function (res) {
              wx.showToast({
                title: '保存圖片失敗'
              })
            }
          })
        }
      }
    })
    downloadTask.onProgressUpdate((res) => {
      if (res.progress === 100) {
        this.setData({
          progress: ''
        })
      } else {
        this.setData({
          progress: res.progress + '%'
        })
      }
    })
  },


易優(yōu)小程序（企業(yè)版）+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址：http://22321a.com/wxmini/doc/course/25038.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢：800182392 點(diǎn)擊咨詢
QQ在線咨詢