VUE项目中附件预览、上传、下载的处理

最新推荐文章于 2026-03-01 11:14:37 发布

原创最新推荐文章于 2026-03-01 11:14:37 发布 · 1.9k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

vue

本文介绍了在Vue项目中如何处理附件预览、下载和上传。预览附件时，通过axios获取arraybuffer并创建Blob对象生成预览链接；下载附件采用get请求，返回blob数据，利用FileReader读取并创建下载链接；上传附件则通过axios发送multipart/form-data格式的数据。

一，附件预览

***前台处理

export function previewFile(fileId) {

//fileId='5f715040cb8a4018beb3b355';

/*window.open(baseURL + "/mysystem/users-anon/receive/data/preview?fileId=" + fileId);*/

this.axiosInstance({

method: "get",

baseURL:baseURL,

url:"/XXXX/preview",//预览接口

params: {fileId:fileId},

responseType: 'arraybuffer',

}).then(function(response) {

if(response){

//console.log('previewFile headers:',response.headers["content-disposition"]);

let fileName = response.headers["content-disposition"].split(";")[1].split(".")[1];//举例"参考点-1.3.xlsx";

console.log(fileName);

if(fileName!="pdf"){

}else{

const binaryData = [];

binaryData.push(response.data);

//获取blob链接

let pdfUrl = window.URL.createObjectURL(new Blob(binaryData, { type: 'application/pdf' }));

window.open(pdfUrl);

}

});

}

***后台需要设置 content-disposition 暴露给前端才能获取。

二，附件下载-返回值为文件流的格式

//根据ID下载--通知公告用,下载返回值为数据流

export function downloadById(fileId) {

//window.location.href = baseURL + "/XXXX/downloadFile?fileId=" + fileId +"&access_token="+getToken();

this.axiosInstance({

method: "get",

url:"/XXXX/downloadFile",//下载接口

params: {fileId:fileId},

responseType: 'blob',

headers:{"Content-Type":"application/json;charset=utf-8","Authorization":'bearer ' + Cookies.get('Admin-Token')},

}).then(function(response) {

if(response && response.headers["content-disposition"]!=undefined){

const blob = response.data;

const reader = new FileReader();

reader.readAsDataURL(blob);

console.log('下载文件headers',response.headers);

var fileName = response.headers["content-disposition"].split(";")[1].split("=")[1];//举例"参考点-1.3.xlsx";

reader.onload = function (e) {

var a = document.createElement('a');// 创建一个a标签用于下载

a.download = decodeURI(fileName);//解码

a.href = e.target.result;

document.body.appendChild(a);

a.click();

document.body.removeChild(a);

}

});

}

三，附件上传

//业务页面

uploadtoAxios(formData){

let that=this;

this.axiosInstance({

data: formData,

headers:{"Content-Type":"multipart/form-data","Authorization":'bearer ' + Cookies.get('Admin-Token')}

}).then(function(res) {

let data=res.data.data;//console.log('res.data.data:',res.data.data);

that.$emit('upload-done', res.data,{dictValue:that.paramObject.dictValue});

});

//main.js中声明

//自定义--上传文件使用

import axios from 'axios'

var axiosInstance = axios.create({

method: "post",

baseURL:process.env.VUE_APP_BASE_API,

url:"/XXXX/uploadFile",//上传公共接口名

timeout:1500000,

});

Vue.prototype.axiosInstance=axiosInstance;

标签

#javascript #vue.js #前端