微信小程序（5）——下载图片

一、普通下载图片

实现功能：点击下载按钮，将图片保存到本地相册。

代码如下：

 //下载图片
  picDown(){
    wx.downloadFile({
      url: this.data.imgUrl,//图片的地址
      success:function(res){
        const tempFilePath = res.tempFilePath  //通过res中的tempFilePath 得到需要下载的图片地址
        wx.saveImageToPhotosAlbum({
          filePath: tempFilePath,  //设置下载图片的地址
          success:function(){
          }
        })
      }
    })
  },

按照官方文档，简单这样写即可，开发测试和发布测试时通常也都能正常下载。但是偶尔会遇到报错：errMsg: "saveImageToPhotosAlbum:fail auth deny"

二、用户授权下载图片

需要用户授权进行保存操作。（不明白为什么同一台手机有的时候需要授权，有的时候不需要授权呢？） 而且授权是需要弹窗支持的。

完整代码如下：

  //下载图片
  picDown(){
    wx.downloadFile({
      url: this.data.imgUrl,//图片的地址
      success:function(res){
        const tempFilePath = res.tempFilePath
        wx.saveImageToPhotosAlbum({
          filePath: tempFilePath,  //设置下载图片的地址
          success:function(){
            wx.hideLoading()
            wx.showModal({
              title: '提示',
              content: '图片已保存到相册',
              showCancel: false,
            })
          },
          fail: function (err) {
            if (err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || err.errMsg === "saveImageToPhotosAlbum:fail auth deny" || err.errMsg === "saveImageToPhotosAlbum:fail authorize no response") {
              // 这边微信做过调整，必须要在按钮中触发，因此需要在弹框回调中进行调用
              wx.showModal({
                title: '提示',
                content: '需要您授权保存到相册',
                showCancel: false,
                success: modalSuccess => {
                  wx.openSetting({
                    success(settingdata) {
                      console.log("settingdata", settingdata)
                      if (settingdata.authSetting['scope.writePhotosAlbum']) {
                        wx.showModal({
                          title: '提示',
                          content: '获取权限成功,再次点击即可保存',
                          showCancel: false,
                        })
                      } else {
                        wx.showModal({
                          title: '提示',
                          content: '获取权限失败，将无法保存到相册哦~',
                          showCancel: false,
                        })
                      }
                    },
                    fail(failData) {
                      console.log("failData", failData)
                    },
                    complete(finishData) {
                      console.log("finishData", finishData)
                    }
                  })
                }
              })
            }
          },
          complete(res) {
            wx.hideLoading()
          }
        })
      }
    })
  },

最后别忘了在微信小程序设置项目配置downloadFile合法域名中添加下载的https域名。

三、图片文件流显示并下载

有时请求接口后端返回的图片格式不是一个完整的url,也不是其他直接能显示的图片格式，而是直接一张图片，即返回为文件流的格式。

需要对这个数据进行如下处理：

wx.request({
    url: this.data.url,
    responseType: 'arraybuffer', //将数据转为类似二进制数组的格式
    success:res=>{
        //进行转码
        let url = 'data:image/png;base64,' + wx.arrayBufferToBase64(res.data)
        this.setData({
            imgUrl:url
        })
    }
})

图片途径已经转成已经base64,直接下载必然失败。

在原有图片下载的基础上，判断是否为base64，如果是则按照文件下载那样解码后下载，如果不是那么用普通下载即可。

  //判断base64并下载图片
  picDown() {
    var save = wx.getFileSystemManager();
    var number = Math.random();
    //判断是否为base64
    if( this.data.imgUrl.includes("base64")){  
      save.writeFile({
        filePath: wx.env.USER_DATA_PATH + '/test' + number + '.png',
        data: this.data.imgUrl.replace('data:image/png;base64,', ''),
        encoding: 'base64',
        success: res => {
          wx.saveImageToPhotosAlbum({ //保存为png格式到相册
            filePath: wx.env.USER_DATA_PATH + '/test' + number + '.png',
            success: function (res) {
              wx.hideLoading()
              wx.showToast({
                title: '保存成功',
                icon: 'success',
                duration: 2000, //提示的延迟时间，单位毫秒，默认：2500
              })
            },
            fail: function (err) {
              wx.hideLoading()
            }
          })
        },
        fail: err => {
          console.log(err)
        }
      })
    }else{
      wx.downloadFile({
        url: this.data.imgUrl,//图片的地址
        success:function(res){
          const tempFilePath = res.tempFilePath
          wx.saveImageToPhotosAlbum({
            filePath: tempFilePath,  //设置下载图片的地址
            success:function(){
              wx.hideLoading()
              wx.showToast({
                title: '保存成功',
                icon: 'success',
                duration: 2000, //提示的延迟时间，单位毫秒，默认：2500
              })
            },
            fail: function (err) {
              wx.hideLoading()
            }
          })
        }
      })
    }
  },