vue+axios+elementUI文件上传与下载
vue+axios+elementUI文件上传与下载
1.文件上传
这里主要介绍一种,elementUI官网 上传组件 http-request 这种属性的使用。

代码如下:
<el-upload class="uploadfile" action="" :http-request='uploadFileMethod' :show-file-list="false" multiple>
<el-button class="custom-btn" size="small">上传</el-button>
</el-upload>
uploadFileMethod方法如下:
uploadFileMethod(param) {
const id = this.currentRowObject.id;
let fileObject = param.file;
let formData = new FormData();
formData.append("file", fileObject);
this.$store
.dispatch("UploadFile", { formData: formData, id: id })
.then(response => {
if (Array.isArray(response)) {
if (response) {
this.$message({
showClose: true,
message: "上传成功。",
type: "success"
});
this.getFileList(id);
}
} else {
this.$message.error(response.message);
}
console.log("response==", response);
})
.catch(message => {
console.log("message======================", message);
this.$message.error("上传失败,请联系管理员");
});
},
这里需要设置header属性

这里是因为封装了axios方法,还使用了vuex。

可将ajax直接替换成axios就好,具体可参见{axios}如下:
axios.post('/upload', formData, { headers: { 'Content-Type': 'multipart/form-data' } })
这里formData就是要向后台传的数据。
2.文件下载
2.1 一种是url式的下载,相当于get请求下载
后台提供一个url。前端a标签href设置上就好。
//带文件名的单个文件下载
@RequestMapping(path = "/downloadwithname/{id}", method = RequestMethod.GET)
public void downloadWithFileName(@PathVariable(name = "id") String strId,
HttpServletResponse response) {
Long id = Utils.stringTransToLong(strId);
//设置Content-Disposition
String fileName = fileService.getFileName(id);
InputStream inputStream = fileService.download(id);
OutputStream outputStream = null;
try {
response.setHeader("Content-Disposition", "attachment;filename="+ URLEncoder.encode(fileName, "UTF-8"));
outputStream = response.getOutputStream();
IOUtils.copy(inputStream, outputStream);
response.flushBuffer();
} catch (IOException e) {
logger.error(e.getMessage(), e);
throw new BizBaseException("server error.");
} finally {
IOUtils.closeQuietly(inputStream);
IOUtils.closeQuietly(outputStream);
}
}

2.2一种是post请求下载 (以流的形式下载文件)
downloadFile() {
const rowId = this.currentRowObject.id;
const rowName = this.currentRowObject.name;
let params = {
ids: this.checkedFileId,
id: rowId
};
this.$store
.dispatch("DownloadFile", params)
.then(res => {
if (res) {
console.log("download===",res);
const content = res.data;
const blob = new Blob([content]);
const fileName = `${rowName}.zip`;
if ("download" in document.createElement("a")) {
// 非IE下载
const elink = document.createElement("a");
elink.download = fileName;
elink.style.display = "none";
elink.href = URL.createObjectURL(blob);
document.body.appendChild(elink);
elink.click();
URL.revokeObjectURL(elink.href); // 释放URL 对象
document.body.removeChild(elink);
} else {
// IE10+下载
navigator.msSaveBlob(blob, fileName);
}
}
})
.catch(() => {
this.$message.error("下载附件失败,请联系管理员");
});
}


总之如下:
axios.post('/download', data, {responseType:'blob' })
后端这里需要设置header:
response.setContentType("application/octet-stream");
// 以流的形式下载文件
try {
InputStream fis = new BufferedInputStream(new FileInputStream(zipFilePath));
byte[] buffer = new byte[fis.available()];
fis.read(buffer);
fis.close();
response.reset();// 清空response
OutputStream toClient = new BufferedOutputStream(response.getOutputStream());
response.setContentType("application/octet-stream");
response.setHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(zipName, "UTF-8"));// 如果输出的是中文名的文件,在此处就要用URLEncoder.encode方法进行处理
toClient.write(buffer);
toClient.flush();
toClient.close();
} catch (IOException ex) {
ex.printStackTrace();
} finally {
//删除临时压缩文件
try {
File f = new File(zipFilePath);
f.delete();
} catch (Exception e) {
e.printStackTrace();
}
}
就先简单介绍这里,如有问题可以留言讨论学习。
vue+axios+elementUI文件上传与下载的更多相关文章
- vue之element-ui文件上传
vue之element-ui文件上传 文件上传需求 对于文件上传,实际项目中我们的需求一般分两种: 对于单个的文件上传,比如拖动上传个图片之类的,或者是文件. 和表单一起实现上传(这种情况一般都是 ...
- vue中的文件上传和下载
文件上传 vue中的文件上传主要分为两步:前台获取到文件和提交到后台 获取文件 前台获取文件,主要是采用input框来实现 <el-dialog :title="addName&quo ...
- vue.js+elementUI文件上传、文件导入、文件下载
1.文件下载 <el-button plain @click ="exportVmExcel()" size='mini' icon="el-icon-downlo ...
- JavaWeb:实现文件上传与下载
JavaWeb:实现文件上传与下载 文件上传前端处理 本模块使用到的前端Ajax库为Axio,其地址为GitHub官网. 关于文件上传 上传文件就是把客户端的文件发送给服务器端. 在常见情况(不包含文 ...
- koa2基于stream(流)进行文件上传和下载
阅读目录 一:上传文件(包括单个文件或多个文件上传) 二:下载文件 回到顶部 一:上传文件(包括单个文件或多个文件上传) 在之前一篇文章,我们了解到nodejs中的流的概念,也了解到了使用流的优点,具 ...
- 精讲响应式WebClient第4篇-文件上传与下载
本文是精讲响应式WebClient第4篇,前篇的blog访问地址如下: 精讲响应式webclient第1篇-响应式非阻塞IO与基础用法 精讲响应式WebClient第2篇-GET请求阻塞与非阻塞调用方 ...
- java web学习总结(二十四) -------------------Servlet文件上传和下载的实现
在Web应用系统开发中,文件上传和下载功能是非常常用的功能,今天来讲一下JavaWeb中的文件上传和下载功能的实现. 对于文件上传,浏览器在上传的过程中是将文件以流的形式提交到服务器端的,如果直接使用 ...
- (转载)JavaWeb学习总结(五十)——文件上传和下载
源地址:http://www.cnblogs.com/xdp-gacl/p/4200090.html 在Web应用系统开发中,文件上传和下载功能是非常常用的功能,今天来讲一下JavaWeb中的文件上传 ...
- JavaWeb学习总结,文件上传和下载
在Web应用系统开发中,文件上传和下载功能是非常常用的功能,今天来讲一下JavaWeb中的文件上传和下载功能的实现. 对于文件上传,浏览器在上传的过程中是将文件以流的形式提交到服务器端的,如果直接使用 ...
随机推荐
- PHP二维数组的引用赋值容易犯的错误
大家一起来分析一下下面这段代码: <?php $arr = array(); $arr["abc"] = array("sex" => 100, & ...
- 用Python获取计算机网卡信息
目录 0. 前言 1. 测试环境及关键代码解释 1.1 测试环境 1.1.1 系统: 1.1.2 开发工具: 2. 模块介绍及演示 2.1 platform模块使用示例 2.2 netifaces模块 ...
- AngularJS视图 ng-view
AngularJS支持通过在单个页面上的多个视图的单页应用.要做到这一点AngularJS提供ng-view 和 ng-template指令,以及 $routeProvider 服务. ng-view ...
- .NET Core中使用读取配置文件
引入Nuget的两个类库 Microsoft.Extensions.Configuration Microsoft.Extensions.Configuration.Json 使用 var build ...
- 转录组测序(RNA-seq)技术
转录组是某个物种或者特定细胞类型产生的所有转录本的集合.转录组研究能够从整体水 平研究基因功能以及基因结构,揭示特定生物学过程以及疾病发生过程中的分子机理,已广泛应 用于基础研究.临床诊断和药 ...
- JSP JSONArray使用遇坑!添加以下6个jar包
1.JAR包简介 要使程序可以运行必须引入JSON-lib包,JSON-lib包同时依赖于以下的JAR包: commons-lang.jar commons-beanutils.jar commons ...
- 关于MQ的几件小事(四)如何保证消息不丢失
1.mq原则 数据不能多,也不能少,不能多是说消息不能重复消费,这个我们上一节已解决:不能少,就是说不能丢失数据.如果mq传递的是非常核心的消息,支撑核心的业务,那么这种场景是一定不能丢失数据的. 2 ...
- $.serializeArray()获取不到input的value值bug问题
今天修改form表单,发现有好几个input值保存不上,上网搜索了一下是$.serializeArray()获取不到disabled的值.如果想要让input元素变为不可用,可以把input设为rea ...
- HighChart中的tooltip的第一行数字明显比其他的字要小
问题:HighChart中的tooltip的第一行数字明显比其他的字要小. 解决办法 headerFormat:'<span style="font-size: 14px;font-f ...
- Mybatis设计模式
mybatis中使用到的设计模式 Mybatis 使用的 9 种设计模式 建造者模式(Configuration) 构造者模式的定义是“将一个复杂对象的构建与它的表示分离,使得同样的构建过程可以创建不 ...