- 由于在用vue做图形验证码登录,然后需要后台返回图片流用作展示验证码,
2.步骤一:
约定vue从后台获取的请求响应为blog
getImageCode(url, params) {
let _params
if (Object.is(params, undefined)) {
_params = ''
} else {
_params = '?'
for (let key in params) {
if (params.hasOwnProperty(key) && params[key] !== null) {
_params += `${key}=${params[key]}&`
}
}
}
return instance.get(`${url}${_params}`, {
responseType: 'blob'
})
},
这里我封装成了一个promise
3.步骤二: 前端使用
//从后台获取图形验证码的数字
getImageCode() {
getImageCode().then(result => {
console.log(result);
if (result.status === 200) {
var binaryData = [];
binaryData.push(result.data);
this.imageCodeUrl = window.URL.createObjectURL(new Blob(binaryData, {type: "application/zip"}));
}
}).catch(error => {
console.log(error);
this.$message.error("获取验证码失败,请稍后重试");
})
},
由于之前直接用window.URL.createObjectURL,加载响应,但是出现错误,
Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided.
4.步骤三:使用
<img :src="imageCodeUrl" @click="getImageCode"/>
所以在网上找了一下解决方式:
http://www.voidcn.com/article/p-qdigdjoc-btb.html