TypeError: Failed to execute ‘createObjectURL‘ on ‘URL‘: Overload resolution failed

阅读本书更多章节>>>>

//request.jsservice.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})

发现报错：

同时，发现接口是有返回值的：

再看打印的res：
发现打印的res并不是最后我们需要的Blob值，我们需要的是Blob类型的值，发现正是res.data（但是从浏览器控制台并不能看出data），所以应该修改request.js为：

const res = response.data // 下载文件 if (!res.code) {   return response.data //等同于 return res }

此时发现打印的res为：

也没有“TypeError: Failed to execute ‘createObjectURL’ on ‘URL’: Overload resolution failed”这个报错了，成功下载了图片。

还有第二种方法：创建一个Blob

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 })

发现打印的res没变

但是也没有出现“TypeError: Failed to execute ‘createObjectURL’ on ‘URL’: Overload resolution failed”报错，而且a.download = '二维码.png’变成了a.download = ‘二维码’，也成功下载了图片。

阅读本书更多章节>>>>

本文链接：https://www.kjpai.cn/gushi/2024-03-28/149808.html，文章来源：网络cs，作者：胡椒，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！