Vuetify下载图片的问题探究

问题描述：

在Vuetify的常用操作中，下载图片一般使用的是传统的FileSaver.js库。然而这个三方库在存储Blob图片文件的时候可能会遇到下面这种情况，下载下来的图片无法打开：

特别是涉及到我们自己写的后端下载文件的接口的时候，出来的图片是打开不了

原因分析：

其中还伴随着一种奇怪的现象：

• 后端直接调用API，通API返回的response里面的url，是可以直接打开图片的

• 但是当二进制图片数据传递给FileSaver之后，图片是无法打开的

这是因为，在后端调用下载图片的API的时候，其底层走的是浏览器，即后面给的下载图片的方法。如果直接将response传给FileSaver存储，文件就会损坏。

---

解决方案：

基于在vuetify中查看图片和下载图片的不同需求，现给出两种思路(核心方法)

查看图片

将解析后的图片数据赋值给img标签

		this.img = URL.createObjectURL(
		  await axios({
		    url: url,
		    method: 'get',
		    responseType: 'blob,
		  })
		);

下载图片

这里的原理主要是使用原生js进行下载图片

		axios({
		  url: url,
		  method: 'get',
		  responseType: 'blob',
		}).then((res) => {
		  const url = window.URL.createObjectURL(res.data);
		  const a = document.createElement('a');
		  a.href = url;
		  a.setAttribute('download', fileName);
		  a.style.display = 'none';
		  document.body.appendChild(a);
		  a.click();
		  document.body.removeChild(a);
		  window.URL.revokeObjectURL(url);
		});