axios获取图片

 vue+tp5前后端分离项目,使用tp5验证码类,

return response($content, 200, ['Content-Length' => strlen($content)])->contentType('image/png');//最后返回的是png图片

后台直接返回的是image文件格式,前端需要处理一下

方法一:

axios.get('/captcha', {
　　params: param,
　　responseType: 'arraybuffer'
})

.then(response => new Buffer(response.data, 'binary').toString('base64'))

.then(data => {
　　$('#img').attr('src', data);
});

// 浏览器中好像没有Buffer，改成这样：
axios.get('/captcha', {
　　params: param,
　　responseType: 'arraybuffer'
})
.then(response => {
　　return 'data:image/png;base64,' + btoa(
　　　　new Uint8Array(response.data).reduce((data, byte) => data + String.fromCharCode(byte), '')
　　);
}).then(data => {
...
})

 原文链接https://segmentfault.com/q/1010000012407559

方法二(更为简单):

html部分

<img :src="img" alt="验证码" title="点击换一张" @click="getimg"/>

 

js部分

methods: {

　　getimg () {

　　　　this.img = this.img + '?num = ' + Math.random();//给图片地址配一个无用的随机数

　　}

}