微信小程序下載照片（顯示進度條）

1、downloadTask/UploadTask理解

downloadTask

• 一個能夠監聽下載進度變化事件，以及取消下載任務的對象
  • 本質：對象
  • 功能一：監聽下載進度變化
  • 功能二：取消下載任務

UploadTask

• 一個能夠監聽上傳進度變化事件，以及取消上傳任務的對象
  • 本質：對象
  • 功能一：監聽上傳進度變化
  • 功能二：取消上傳任務

1.一、監聽下載進度變化事件

downloadTask.onProgressUpdate((res) => {
  console.log('下載進度', res.progress)
  console.log('已經下載的數據長度', res.totalBytesWritten)
  console.log('預期須要下載的數據總長度', res.totalBytesExpectedToWrite)
})
複製代碼

1.二、取消監聽下載進度變化事件

DownloadTask.offProgressUpdate(function callback)
複製代碼

1.三、 監聽 HTTP Response Header 事件

DownloadTask.onHeadersReceived(function callback)
複製代碼

1.四、 取消監聽 HTTP Response Header 事件

DownloadTask.offHeadersReceived(function callback)
複製代碼

1.五、中斷下載任務

DownloadTask.abort()
複製代碼

2、downloadFile 下載文件理解

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

success 返回的兩個參數

• tempFilePath

  • 臨時文件路徑。
  • 若是沒傳入 filePath 指定文件存儲路徑，則下載後的文件會存儲到一個臨時文件
  • string

• statusCode

  • 開發者服務器返回的 HTTP 狀態碼
  • number

wx.downloadFile({
  url: 'https://example.com/audio/123', 
  header:'', //HTTP 請求的 Header，Header 中不能設置 Referer
  filePath:'',//指定文件下載後存儲的路徑
  success(res) {
    // 只要服務器有響應數據，就會把響應內容寫入文件並進入 success 回調
    //業務須要自行判斷是否下載到了想要的內容
    if (res.statusCode === 200) {
      wx.saveImageToPhotosAlbum({
        filePath: res.tempFilePath
      })
    }
  },
  fail(err){
      console.log(err)
  },
  complete(res){
      console.log(res)
  }
})
複製代碼

3、saveImageToPhotosAlbum 理解

• 功能：保存圖片到系統相冊

wx.saveImageToPhotosAlbum({
  filePath:'',
  success(res) { 
      
  }，
  fail(err){
      
  },
  complete(res){
      
  }
})
複製代碼

4、代碼展現

/**
   * [downloadPhoto 下載照片]
   */
  downloadPhoto (e) {
    let imgUrl = e.currentTarget.dataset.src
    // 下載監聽進度
    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 + '%'
        })
      }
    })
  },
複製代碼