介绍
通过JS方法来转换arraybuffer二进制图片
# 什么是二进制图片
- 我们做登录的时候 经常会用到验证码 有的验证码是手机验证 有的验证码是后端传来的二进制图片验证码 如果我们遇到后端二进制图片验证码 就需要给其转换 让其二进制图片转换成前端可渲染的
base64图片
- 这种图片在前端的二进制类型中 属于
arraybuffer二进制类型 推荐到这里 (opens new window) 去了解JavaScript的二进制的三种类型
# 如何请求和如何转换
- 想得到
arraybuffer类型的二进制图片 你需要在请求接口的时候指定相应类型responseType: 'arraybuffer'才可以获取到 - 该笔记是面向于vue项目开发
第一步 通常我们会在utils中二次封装axios 在二次封装的axios中单独处理获取二进制图片的接口
import axios from 'axios'
// 设置axios的根路径
const service = axios.create({
// 读取生产环境的跟路由 在.env.production中配置
baseURL: process.env.VUE_APP_BASE_API // url = base url + request url
// withCredentials: true, // send cookies when cross-domain requests
// timeout: 5000 // request timeout
})
// 进行特殊处理获取arraybuffer二进制图片的特殊封装
const http = {
// 不需要携带参数的post的arraybuffer类型的二进制数据
getImage (url) {
return service.post(url, null, {
// 设置数据格式为arraybuffer
responseType: 'arraybuffer'
})
}
// 命名导出
export { http }
}
第二步 在api接口中 使用特殊处理的方法
// 导入处理的arraybuffer相应类型
// 导入arraybuffer二进制图片的特殊封装
import { http } from '@/utils/request'
// 获取二进制图片接口
// 不需要携带参数的post的arraybuffer类型的二进制数
export async function getImageApi () {
return await http.getImage('/api/sysUser/image') // 这里api地址 自行替换成后端接口文档提供的即可
}
第三步 这个时候当你在页面上调用后 你会发现 返回的数据格式如下
- 说明已经获取到后端的二进制图片啦 这时候你需要在前端进行特殊处理 把他转换成前端可渲染的
base64 - 我们处理二进制图片的时候 可以再axios的请求拦截器中做处理 当然你也可以在vue页面进行转换
// response interceptor
// 请求返回之后的拦截器
service.interceptors.response.use(
/**
* If you want to get http information such as headers or status
* Please return response => response
*/
/**
* Determine the request status by custom code
* Here is just an example
* You can also judge the status by HTTP Status Code
*/
response => {
const res = response.data
if (res.code !== 200) { // 这里根据后端适配 我们项目没有code值 直接就是arraybuffer格式的二进制 通常都是直接arraybuffer格式
// 验证码处理：返回的是arraybuffer,需要转成base64
// 1.把arraybuffer转换成二进制字符
// 2.把二进制字符转换为base64 (btoa方法)字符给img使用
const indexs = response.config.responseType
if (indexs == 'arraybuffer') {
return Promise.resolve(
'data:image/png;base64,' +
window.btoa(
new Uint8Array(res).reduce(
(data, byte) => data + String.fromCharCode(byte), ''
)
)
)
}
return Promise.reject(new Error(res.msg || '服务器出错'))
} else {
return res
}
}
)
第四步 在vue页面中调用该接口 获取到base64
import { getImageApi } from '@/api/user'
async getImage () {
this.imgSrc = await getImageApi()
// 此时this.imgSr 就已经处理好成base64啦
},