后端接口返回图片（数据流）前端怎么处理（ArrayBuffer转base64）【包含PC以及小程序】-Toy模板网

这篇具有很好参考价值的文章主要介绍了后端接口返回图片（数据流）前端怎么处理（ArrayBuffer转base64）【包含PC以及小程序】。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

第一步修改api封装

export function post(url, data = {}, config = {}) {
  const userInfo = store.state.userInfo

  const wrapData = {
    head: {
      userId: userInfo.brandId,
    },
    con: data,
    responseType: config.responseType || 'text', // 主要为了修改这个 responseType
  }
 }

	// 添加config
	export function getConsumQrCode(params, config) {
	  return post('/jackpot/jackpotInfo/getConsumQrCode', params, config)
	}

第二步页面应用

1.微信小程序做法：

	//  页面中调用方法  传递config  使用uniapp 的API uni.arrayBufferToBase64
	//  将返回的 ArrayBuffer值 转换为 base64 格式
    async getData() {
   	  // 第一个{} 代表params  第二个{} 代表 config
      const res = await getConsumQrCode({
        recordId: 1,
      }, {
        responseType: 'arrayBuffer',
      })
      this.imgUrl = `data:image/png;base64,${uni.arrayBufferToBase64(res)}`
    },

      <img
        :src="imgUrl"
      >

2.PC做法：

  修改为 arraybuffer后， 后端返回的res肯定是乱码 - 数据流
  转换位 Blob 对象,用法参考MDN
  然后使用window的createObjectURL将Blob对象转换为url
  最后直接在img的src上使用

MDN-前端必看网站

    async getImg() {
      const res = await getCodeImg({}, {
        responseType: 'arraybuffer',
      })
      const img = new Blob([res], { type: 'image/png' })
      this.imgUrl = window.URL.createObjectURL(img)
    },

#最后如果axios的封装时有封装响应拦截器，如下：

axios.interceptors.response.use((response) => {
 	// 这个判断会出问题 因为后端返回的值是乱码  所以 response.data.head 是没有的
 	//所以也就捕捉不到接口是失败还是成功
  if (response.data.head?.status !== 0) {
    return createApiError({
      url: response?.config.url,
      response,
      message: response.data.head.msg,
      code: response.data.head.status,
    })
  }
  return response
}, async (error) => {
  return createApiError({
    error,
    url: error?.config?.url,
    message: error?.errMsg,
  })
})

要给这个if判断的条件做补充

axios.interceptors.response.use((response) => {
  if (response.data.head?.status !== 0 && response.headers['content-type'].includes('application/json')) {
    return createApiError({
      url: response?.config.url,
      response,
      message: response.data.head.msg,
      code: response.data.head.status,
    })
  }
  return response
}, async (error) => {
  return createApiError({
    error,
    url: error?.config?.url,
    message: error?.errMsg,
  })
})

完成，如果有用，请赏一个赞！

这里放axios官网的请求配置中 responseType 可选值参考（封装axios必须了解）
axios官网地址
接口直接返回一个图片前端怎么弄,前端,微信小程序,javascript 文章来源地址https://www.toymoban.com/news/detail-623550.html

到了这里，关于后端接口返回图片（数据流）前端怎么处理（ArrayBuffer转base64）【包含PC以及小程序】的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

后端接口返回图片（数据流）前端怎么处理（ArrayBuffer转base64）【包含PC以及小程序】

第一步修改api封装

第二步页面应用

1.微信小程序做法：

2.PC做法：

完成，如果有用，请赏一个赞！

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

支付宝扫一扫领取红包，优惠每天领

二维码1

二维码2

后端接口返回图片（数据流）前端怎么处理（ArrayBuffer转base64）【包含PC以及小程序】

第一步 修改api封装

第二步 页面应用

1.微信小程序做法：

2.PC做法：

完成，如果有用，请赏一个赞！

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

支付宝扫一扫领取红包，优惠每天领

二维码1

二维码2

第一步修改api封装

第二步页面应用