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("获取验证码失败,请重试");}},
});