微信小程序-文件流图片处理

不知云起时

已于 2023-09-10 23:03:55 修改

阅读量660

点赞数 2

文章标签：微信小程序 json

于 2023-09-10 23:00:46 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_43790019/article/details/132797088

版权

文章讲述了在使用微信小程序请求后端接口获取图形验证码时，如何处理正常返回文件流图片和接口异常时返回JSON数据的过程，包括错误捕获和Base64编码的处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

后端接口正常情况返回文件流图片，异常时返回json

返回示例：

// 获取图形验证码
  getCaptchaImage(){
    const that = this
    wx.showLoading({ title: '加载中' })

    wx.request({
      url: 'xxxxxx',
      method: "POST",
      data: { a: 123 },
      header: {
        'content-type': 'application/x-www-form-urlencoded'
      },
      responseType: 'arraybuffer',
      success: (res)=>{
        if(res && res.data){
          try {
            // 当接口返回的是文件流时，下面的解析会报错
            let unit8Arr = new Uint8Array(res.data)
            let encodedString = String.fromCharCode.apply(null, unit8Arr)
            let decodedString = decodeURIComponent(escape(encodedString))
            let result = JSON.parse(decodedString)
            if(!result.success){
              wx.showToast({
                 title: '操作频繁，请稍后再试',
                 icon: 'none'
              })
            }
          } catch (err) {
            let base64 = wx.arrayBufferToBase64(res.data)
            let captchaImage = "data:image/png;base64," + base64
            that.setData({ captchaImage })
          }
        }else{
          wx.showToast({
             title: '图形验证码获取失败',
             icon: 'none'
          })
        }
      },
      complete: ()=>{
        wx.hideLoading()
      }
    })
  },

参考：https://www.cnblogs.com/letleon/p/14143158.html