elementUI文件上传组件实现下载功能

elementUI上传组件实现下载功能

html部分

<el-upload
	class="upload-demo"
	action="#"
	//利用on-handlePreview实现下载
	:on-preview="handlePreview"
	:on-remove="handleRemove"
	:file-list="fileList"
	:on-change="selectFile"
	list-type="picture">
	<el-button size="small" icon="el-icon-upload2">上传</el-button>
</el-upload>

js部分

handlePreview(file) {
	const image = new Image();
	// 解决跨域 canvas 污染问题
	image.setAttribute('crossOrigin','anonymous');
	image.onload = function(){
		const canvas = document.createElement('canvas');
		canvas.width = image.width;
		canvas.height = image.height;
		const context = canvas.getContext('2d');
		context.drawImage(image,0,0,image.width,image.height);
		const url = canvas.toDataURL('image/png');
		// 生成一个 a 标签
		const a = document.createElement('a');
		// 创建一个点击事件
		const event = new MouseEvent('click');
		// 将 a 的 download 属性设置为我们想要下载的图片的名称，若 name 不存在则使用'图片'作为默认名称
		a.download = file.name || '图片';
		// 将生成的 URL 设置为 a.href 属性
		a.href = url;
		// 触发 a 的点击事件
		a.dispatchEvent(event);
	};
   	image.src = file.url
},

OK,这样就实现谷歌浏览器的下载啦~