vue 上传和下载文件/图片

最新推荐文章于 2024-07-09 15:15:21 发布

Shiki2147

最新推荐文章于 2024-07-09 15:15:21 发布

阅读量995

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Shiki2147/article/details/126345554

版权

vue 上传和下载文件/图片

前端上传图片/文件(fromData格式)

// 接口参数
export function add(formdata) {
    return request({
        url: '',
        method: 'post',
        headers: { 'Content-Type': 'multipart/form-data' },
        data: formdata
    })
}

// 传入的formdata值
var formdata = new FormData();
// 使用elementUI的上传控件，返回的file对象
formdata.append("file", this.file.row);

前端下载文件/展示图片（blob）

// 接口参数
function getFile(name) {
	return service({
		url: '/file/downloadFileRedis?fileName='+name,
		method: 'get',
		responseType:'blob'	
	})

// 文件下载
getFile(this.fileName).then(res =>{
    const blob = new Blob([res],{type:Headers['content-type']});
    if('download' in document.createElement('a')){
        //非IE下载
        const a = document.createElement('a');
        a.download = this.fileName;
        a.style.display = 'none';
        a.href = window.URL.createObjectURL(blob);
        document.body.appendChild(a);
        a.click();
        window.URL.revokeObjectURL(a.href);
        document.body.removeChild(a);
    }else{
        //IE10+下载
        if(typeof window.navigator.msSaveBlob !== 'undefined'){
        window.navigator.msSaveBlob(blob, _this.selected);
        }else{
        let URL = window.URL || window.webkitURL;
        let downloadUrl = URL.createObjectURL(blob);
        window.location = downloadUrl;
    }
    }    
})


// 图片展示
getFile(this.fileName).then(res =>{
 const blob = new Blob([res],{type:Headers['content-type']});
    let url = window.URL.createObjectURL(blob);
    this.imgurl1 = url
    return true
})


// SVG图片展示
getFile(this.fileName).then(res =>{
 const blob = new Blob([res],{type:Headers['image/svg+xml;charset=utf-8']});
    let url = window.URL.createObjectURL(blob);
    this.imgurl1 = url
    return true
})