- 由于在用vue做圖形驗證碼登錄,然后需要后臺返回圖片流用作展示驗證碼,
2.步驟一:
約定vue從后臺獲取的請求響應(yīng)為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.步驟二: 前端使用
//從后臺獲取圖形驗證碼的數(shù)字
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,加載響應(yīng),但是出現(xiàn)錯誤,
Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided.
4.步驟三:使用
<img :src="imageCodeUrl" @click="getImageCode"/>
所以在網(wǎng)上找了一下解決方式:
http://www.voidcn.com/article/p-qdigdjoc-btb.html
