Javascript: 通过图片url获取图片blob对象，并在下载时重命名问题

weixin_46021159

已于 2023-01-31 14:57:38 修改

阅读量4k

点赞数 4

文章标签： javascript 前端

于 2022-06-25 18:03:24 首次发布

本文链接：https://blog.csdn.net/weixin_46021159/article/details/125221437

版权

博客讲述了在前端开发中遇到的一个问题：后台上传文件时强制改名，导致下载时文件名丢失。作者分享了一个使用fetch和Blob对象实现的解决方案，通过创建a标签并设置download属性来指定文件名，从而实现下载并重命名文件。注意，这个方法不适用于IE浏览器。此外，还提到了axios GET请求可能导致文件损坏的情况。

摘要由CSDN通过智能技术生成

最近在做项目过程中碰到一个需求，前端在上传文件或图片时传入的文件被后台强制改名，以至于下载（给的url）的时候无法获取到当前文件名称。故此，就有了下面的故事。

网上检索了一大堆下载时的方法，绝大部分都不能使用（坑人），现做一个整理，保证药到病除。

废话不多说，咱们直接开始

<button @click="downloadFile(index)"> 下载文件 </button>

		downloadFile(index) {
		    // 后端返回的url 数组，初期取得。
		    let url = this.troubleFeedbackImg[index]
            // 后端返回的name 数组，初期取得。
			let name = this.troubleFilename[index]
		    
			this.getBlob(url, name)
		},
		// 第一步，要先通过当前url 取得 blob 对象（必须）
		async getBlob(url, fileName) {
		    // fetch 为ES6新增，不支持IE兼容，请注意分辨
		    await fetch(url)
		    .then((response) => {
		        return response.blob() // 转为文件流 请求类型类型 或其他类型
		    })
		    .then( res => {
		        let blob = new Blob([res]) // 转为blob
		        this.downloadFileName(blob, fileName) // 下载并重命名函数
		    })
		},
		downloadFileName(blob, fileName) {
		    let link = document.createElement('a') // 创建a标签
		    link.href = window.URL.createObjectURL(blob) // 获取blob 下载url
		    link.download = fileName  // a标签新增属性  download 用于指定文件名
		    link.click() // 点击下载
            URL.revokeObjectURL(link.href)
            document.body.removeChild(link)
		}

本方法不适用于IE，不适用于IE，不适用于IE，测试兼容过程中发现用axios的GET请求会导致当前文件损坏，现在不知原因为何。

本文部分参考某大神代码片段（找不到网址了，就不贴了）