van-uploader附件点击下载文件

最近的项目的一个需求：附件图片类型点击查看,非图片类型点击下载附件。
使用的是vant组件van-uploader

一。点击调用接口，我调用的接口返回的类型是blob类型的，所以我们的请求也应该是blob类型，记得设置reponseType:‘blob’ !!!

export function lookDown(uuid){
    return request({
        url:'api/file/download/'+uuid,
        method:'get',
        responseType: 'blob'
    })
}

二。添加点击事件，@click-preview，有默认参数file和detail（这个方法是组件自带的方法）

<van-uploader
	v-model="enclosure"
	class="my-uploader-square"
	:deletable="false"
	:preview-full-image="true"
	:show-upload="false"
	:preview-options="ImagePreview"
	@click-preview="lookDown"
 >
</van-uploader>

三。调用方法，首先判断文件的类型，如果时图片类型则不做操作，只有非文件类型才做操作。

lookDown(file,detail){
	// 获取指定字符串最后一次出现的位置，返回index
	var index1 = file.url.lastIndexOf('.'); 
	var index2 = file.url.lastIndexOf('/');
	// substr(start, length) 抽取从start下标开始的length个字符，返回新的字符串;
	var style = file.url.substr(index1 + 1) 
	//调用下载文件接口需要传递的参数
	var uuid = file.url.substr(index2+1,index1);
	//判断图片类型，不需要下载，不做处理
	if(style=='png'||style=='jpg'||style=='jpeg'||style=='bmp'||style=='gif'||style=='webp'||style=='psd'||style== 'svg'||style=='tiff'){
	//判断非图片类型
	}else{
		//调用获取文件的接口，获取文件
		lookDown(uuid).then(res=>{
			//创建a标签
			var a = document.createElement('a');
			//需要下载的数据内容,我这里放的就是BLOB，如果你有下载链接就不需要了
			var url = window.URL.createObjectURL(res);
			//获取文件名
			var name =file.file.name.substr(0,file.file.name.lastIndexOf('.'));
			//下载的文件名
			var filename = name+'.'+style;
			a.href = url;
			//a标签有一个download的属性，添加了该属性，a标签将直接下载文件，并根据download属性的值设置下载文件的文件名，不为download属性设置值则文件将以默认文件名下载
			a.download = filename;
			a.click();
			window.URL.revokeObjectURL(url);
		}).catch(() => {
			this.$message({
			type: 'info',
			message: '附件下载失败'
		})
	})
	}
},

如果这篇文章对你有帮助的话，就留下一个赞吧！