微信小程序处理后端返回图片二进制流，下载到本地1.问题描述今天开发小程序后台返回一个图片的文件流让我获取到流之后下载

1.问题描述

今天开发小程序后台返回一个图片的文件流让我获取到流之后下载到手机本地，发现返回的文件流是可以拿到，但是图片下载到本地后都是损坏的

wx.arrayBufferToBase64() 该方法尝试后发现已经被官方弃用了
因为是post请求成功后返回的文件流所以 wx.uploadFile 也不能使用了

2.调试经历

1.先用浏览器尝试了一下下载该文件流是成功的,证明返回的文件流是没有问题的 下面是代码截图

const addClickDownload = () => {
  let configReq = {
    url: '',
    method: 'post',
    data: { id: '776824797408526352'},
    isDownLoadFile: true,
  }
  axiosReq(configReq).then(res => {
    console.log(res)
    let blob = new Blob([res.data],{type:'image/jpeg'})
    console.log(blob)
    let downloadElement = document.createElement('a')
    let href = window.URL.createObjectURL(blob)
    console.log(href)
    downloadElement.href = href
    downloadElement.download = '下载文件' // 下载后文件名
    document.body.appendChild(downloadElement)
    downloadElement.click() // 点击下载
    document.body.removeChild(downloadElement) // 下载完成移除元素
    window.URL.revokeObjectURL(href) // 释放掉blob对象
  })
}

下载之后流是一张图片，但是有个问题一直困扰我就是后台返回的 responese Headers 中的 Content-type: application/image 这个是个啥看了文档也没找到这个类型 Content-type 对照表下面是后台接口的响应报头

但是通过 new Blob()的方式确实获取到了图片.....

2.在开发者工具上调试提示图片下载成功，但是图片是损坏的，真机上提示 二进制编码错误失败

这个问题困扰了我好久，后才发现我的 wx.request中的responseType 字段放到了 header['responseType'] = 'arraybuffer'中

之前错误代码的截图

3.最终解决

伪代码

wx.request({
    url: '',
    method: 'post',
    data: {id: '123'},
    header: header,
    timeout: 4000,
    responseType: 'arraybuffer', // 一定放对地方
}).then(res => {
    const fs = wx.getFileSystemManager()
    const filePath = wx.env.USER_DATA_PATH + '/' + '自定义名称' + '.png'
    fs.writeFile({
        filePath: filePath,
        data: res, // 传入二进制流
        encoding: 'binary',  //这里必须设置为二进制流
        success: () => {
          wx.saveImageToPhotosAlbum({
            filePath: filePath,
            success: () => {
              wx.showToast({
                title: '下载成功',
                icon: 'none',
                duration: 3000
              })
            }
          })
        },
        fail: (error) => {
          console.log(error)
        }
    })
    
})

参考链接：参考链接

总结

1.微信小程序下载图片get请求可以使用 wx.downloadFile()

2.微信小程序下载图片流先设置 responseType:arraybuffer 获取到图片流之后转未arraybuffer 之后用 wx.getFileSystemManager 获取全局文件管理器，然后 wx.getFileSystemManager.writeFile()写入文件，用 wx.saveImageToPhotosAlbum 下载图片