【前端基础】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: " example /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: " example /some-binary-data", method: "post", header: { "Content-Type": "application/x- -form-urlencoded", }, responseType: "arraybuffer", // 添加这句至关重要 success: (res) => { if (res.data) { this.codeImgSrc = "data:image/png;base64," + uni.arrayBufferToBase64(res.data); } else { uni.$u.toast("获取验证码失败，请重试"); } }, });