微信小程序下载照片（显示进度条）

一、downloadTask/UploadTask理解

downloadTask

• 一个可以监听下载进度变化事件，以及取消下载任务的对象
  • 本质：对象
  • 功能一：监听下载进度变化
  • 功能二：取消下载任务

UploadTask

• 一个可以监听上传进度变化事件，以及取消上传任务的对象
  • 本质：对象
  • 功能一：监听上传进度变化
  • 功能二：取消上传任务

1.1、监听下载进度变化事件

1. downloadTask.onProgressUpdate((res) => {
   
   console.log('下载进度', res.progress)
   
   console.log('已经下载的数据长度', res.totalBytesWritten)
   
   console.log('预期需要下载的数据总长度', res.totalBytesExpectedToWrite)
   
   })

1.2、取消监听下载进度变化事件

1. DownloadTask.offProgressUpdate(function callback)

1.3、 监听 HTTP Response Header 事件

1. DownloadTask.onHeadersReceived(function callback)

1.4、 取消监听 HTTP Response Header 事件

1. DownloadTask.offHeadersReceived(function callback)

1.5、中断下载任务

1. DownloadTask.abort()

二、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)

}

})

三、saveImageToPhotosAlbum 理解

• 功能：保存图片到系统相册

wx.saveImageToPhotosAlbum({

filePath:'',

success(res) {


}，

fail(err){


},

complete(res){


}

})

四、代码展示

1. /**
   
   * [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 + '%'
   
   })
   
   }
   
   })
   
   },