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

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

发现报错:
在这里插入图片描述
同时,发现接口是有返回值的:
在这里插入图片描述

再看打印的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 = ‘二维码’,也成功下载了图片。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
THE END
分享
二维码
< <上一篇
下一篇>>