//request.js
service.interceptors.response.use(
(response) => {
const res = response.data
// 下載文件
if (!res.code) {
return response
}
...
},
(error) => {
...
}
export function downloadQrcode(params) {
return request({
url: '/multiplayer-draw/download-qrcode',
method: 'get',
// headers: { 'Content-Type': 'image/png; charset=UTF-8' },
responseType: 'blob', // response類型
params
})
}
downloadQrcode({id: this.id}).then(res => {
console.log(res,'res');
var a = document.createElement('a')
document.body.appendChild(a)
a.style = 'display: none'
let url = window.URL.createObjectURL(res);
a.href = url
a.download = '二維碼.png'
a.click()
a.remove()
window.URL.revokeObjectURL(url) // 釋放url
})
發(fā)現(xiàn)報(bào)錯(cuò)：
同時(shí)，發(fā)現(xiàn)接口是有返回值的：
再看打印的res：
發(fā)現(xiàn)打印的res并不是最后我們需要的Blob值，我們需要的是Blob類型的值，發(fā)現(xiàn)正是res.data（但是從瀏覽器控制臺(tái)并不能看出data），所以應(yīng)該修改request.js為：
const res = response.data
// 下載文件
if (!res.code) {
return response.data //等同于 return res
}
此時(shí)發(fā)現(xiàn)打印的res為：
也沒有“TypeError: Failed to execute ‘createObjectURL’ on ‘URL’: Overload resolution failed”這個(gè)報(bào)錯(cuò)了，成功下載了圖片。
還有第二種方法：創(chuàng)建一個(gè)Blob文章來源：http://www.zghlxwxcb.cn/news/detail-542862.html
downloadQrcode({id: this.id}).then(res => {
console.log(res,'res');
var a = document.createElement('a')
document.body.appendChild(a)
a.style = 'display: none'
//增加了下面三行
let blob = new Blob([res], {
type: "image/png",
});
let url = window.URL.createObjectURL(blob);
a.href = url
a.download = '二維碼'
a.click()
a.remove()
window.URL.revokeObjectURL(url) // 釋放url
})
發(fā)現(xiàn)打印的res沒變
但是也沒有出現(xiàn)“TypeError: Failed to execute ‘createObjectURL’ on ‘URL’: Overload resolution failed”報(bào)錯(cuò)，而且a.download = '二維碼.png’變成了a.download = ‘二維碼’，也成功下載了圖片。文章來源地址http://www.zghlxwxcb.cn/news/detail-542862.html
到了這里，關(guān)于TypeError: Failed to execute ‘createObjectURL‘ on ‘URL‘: Overload resolution failed的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
