【前端基础】uniapp、axios 获取二进制图片

responseType: "arraybuffer

在网络请求中，responseType: "arraybuffer" 是指定服务器响应的数据类型为二进制数据缓冲区（ArrayBuffer）。这是XMLHttpRequest（XHR）和Fetch API等客户端JavaScript API中的一个选项。

当你设置responseType: "arraybuffer"时，你告诉浏览器在接收到服务器响应后，将数据以二进制数组的形式存储在一个ArrayBuffer对象中。这对于处理诸如图像、音频、视频等二进制数据非常有用。

使用这个选项可以更有效地处理二进制数据，而不必将其转换为文本或其他格式。这在一些应用中很重要，例如下载图像、音频或视频文件，或者进行与图像处理相关的操作。

axios 中获取二进制图片

以下是在axios中的简单示例，演示如何设置responseType: "arraybuffer"：

假设二进制数据存在 res.data 中

// 将二进制数据转换为 Base64
bufferToBase64 (buffer) {
   
  const binary = new Uint8Array(buffer);
  const base64 = btoa(String.fromCharCode.apply(null, binary));
  return 'data:image/jpeg;base64,' + base64;
},
// 获取二进制图片
async getCode () {
   
  this.axios({
   
	  method: "post",
	  url: "https://example.com/some-binary-data",
	  responseType: 'arraybuffer', //添加这句至关重要！
	  headers: {
   
	    "content-type": "application/json",
	  },
	}).then((res) => {
   
	  console.log('res', res)
	  if (res.data) {
   
	    this.codeImgSrc = this.bufferToBase64(res.data)
	  } else {
   
	    this.$toast.fail("获取图片失败，请重试");
	  }
	})
},

uniapp中获取二进制图片

await uni.request({
   
	url: "https://example.com/some-binary-data",
	method: "post",
	header: {
   
		"Content-Type": "application/x-www-form-urlencoded",
	},
	responseType: "arraybuffer", // 添加这句至关重要
	success: (res) => {
   
		if (res.data) {
   
			this.codeImgSrc = "data:image/png;base64," + uni.arrayBufferToBase64(res.data);
		} else {
   
			uni.$u.toast("获取验证码失败，请重试");
		}
	},
});