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

一、downloadTask/UploadTask理解

downloadTask

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

• 本质：对象

• 功能一：监听下载进度变化

• 功能二：取消下载任务

UploadTask

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

• 本质：对象

• 功能一：监听上传进度变化

• 功能二：取消上传任务

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

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

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

DownloadTask.offProgressUpdate(function callback)复制代码

1.3、 监听 HTTP Response Header 事件

DownloadTask.onHeadersReceived(function callback)复制代码

1.4、 取消监听 HTTP Response Header 事件

DownloadTask.offHeadersReceived(function callback)复制代码

1.5、中断下载任务

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){}
})

四、代码展示

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