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

这篇具有很好参考价值的文章主要介绍了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
})

发现报错:
TypeError: Failed to execute ‘createObjectURL‘ on ‘URL‘: Overload resolution failed,javascript,前端,html
同时,发现接口是有返回值的:
TypeError: Failed to execute ‘createObjectURL‘ on ‘URL‘: Overload resolution failed,javascript,前端,html

再看打印的res:
TypeError: Failed to execute ‘createObjectURL‘ on ‘URL‘: Overload resolution failed,javascript,前端,html发现打印的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,javascript,前端,html
也没有“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,javascript,前端,html
但是也没有出现“TypeError: Failed to execute ‘createObjectURL’ on ‘URL’: Overload resolution failed”报错,而且a.download = '二维码.png’变成了a.download = ‘二维码’,也成功下载了图片。文章来源地址https://www.toymoban.com/news/detail-542862.html

到了这里,关于TypeError: Failed to execute ‘createObjectURL‘ on ‘URL‘: Overload resolution failed的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包