axios获取后端返回的二进制验证码图片或者图片对象
发表于:2024-07-20 17:33:39浏览:817次
在开发 Web 应用程序时,我们经常需要与后端的接口进行数据交互。其中,接收文件流是一个常见的需求,比如本文提到的接收图片文件流。下面将介绍如何使用 Axios 在前端接收图片文件流的方案。
1、axios 中获取二进制图片
在网络请求中,responseType: “arraybuffer” 是指定服务器响应的数据类型为二进制数据缓冲区(ArrayBuffer)。这是XMLHttpRequest(XHR)和Fetch API等客户端JavaScript API中的一个选项。
当设置responseType: “arraybuffer”时,你告诉浏览器在接收到服务器响应后,将数据以二进制数组的形式存储在一个ArrayBuffer对象中。这对于处理诸如图像、音频、视频等二进制数据非常有用。
使用这个选项可以更有效地处理二进制数据,而不必将其转换为文本或其他格式。这在一些应用中很重要,例如下载图像、音频或视频文件,或者进行与图像处理相关的操作。
以下是在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://abc.com/captcha/get",
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("获取图片失败,请重试");
}
})
},
2、axios 中获取图片对象
a、在axios封装时,根据url判断将请求的响应格式改为’blob’格式,axios默认为json
// 请求拦截器
request.interceptors.request.use(
(config) => {
const tokenStr = sessionStorage.getItem("token");
if (tokenStr) {
config.headers.token = tokenStr;
}
// 判断url改变响应数据格式
if (config.url === '/user/image_code') {
config.responseType = 'blob'
}
return config; // 返回这个配置对象,如果没有返回,这个请求就不会发送出去
},
(error) => {
return Promise.reject(error);
}
)
b、在使用时
async imageCode() {
//接收后端接口返回
const result = await getImageCode()
//接收后转为blob对象
let blob = new Blob([result.data], {type: "image/png"});
//转换为url对象
let url = window.URL.createObjectURL(blob);
this.imageUrl = url;
},
推荐文章
- 宝塔Linux面板安装Composer依赖管理工具与PHP依赖包的方法
- 资深程序员:MySQL不建议使用delete删除数据
- uniapp中webview支持history.back的方法
- Windows Terminal Preview 1.15 发布
- 勾股DEV,一款专为IT行业研发团队打造的智能化项目管理与团队协作的工具软件
- 微软推出VS Code PowerShell的重大更新 PowerShell 引擎的彻底改造
- JavaScript实现两个日期之间的工时计算,排除周末,每天工作日是8小时
- 2021年轻人熬夜报告:你每天熬夜都在干什么?
- 云服务器挂载云盘,以天翼云为例子的挂载步骤
- 微信浏览器或手机浏览器字体大小调整 导致H5页面布局错乱解决方案