本文详细介绍了如何使用SpringBoot后端结合Vue前端实现文件的上传与下载功能。通过ElementUI的Upload组件和Axios，配合后台SpringBoot的处理，实现了文件上传的前端校验、上传与下载操作。同时讨论了如何通过http-request方法处理上传失败的提示，以及使用before-upload方法优化用户体验。
文章目录
1. 前言
简要地记录下 SpringBoot 与 Vue 实现文件的上传与下载
2. 简单案例
2.1 功能需求
前台使用 ElementUI 的 Upload 组件或者是 Axios，后台使用 SpringBoot 来实现文件的上传与下载
2.2 开发环境
- IDEA-2019.1
- SpringBoot-2.0.2.RELEASE
- Maven-3.5.3
- HBuilderX
2.3 编写代码
2.3.1 上传、下载
2.3.1.1 前端
使用 ElementUI 的 Upload 组件
我这里在 html 页面引入：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="./js/vue.min.js"></script>
<link rel="stylesheet" href="./css/index.css">
<script src="./js/index.js"></script>
</head>
<body>
<div id="app">
<div style="top:100px;width:300px">
<el-form ref="upload" :model="form" label-width="120px">
<el-form-item label="请输入文件名" required>
<el-input v-model="form.fileName" auto-complete="off" class="el-col-width"></el-input>
</el-form-item>
<el-form-item>
<el-button size="small" type="primary" @click="handleDownLoad">下载</el-button>
</el-form-item>
<el-form-item>
<el-upload class="upload-demo" :action="uploadUrl" :before-upload="handleBeforeUpload" :on-error="handleUploadError"
multiple :limit="5" :on-exceed="handleExceed" :file-list="fileList" :on-success="onSuccess">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">不超过10Kb</div>
</el-upload>
</el-form-item>
</el-form>
</div>
</div>
</body>
<script type="application/javascript">
var app = new Vue({
el: '#app',
data: {
form: {
fileName: 'test.txt'
},
// 后台请求url
uploadUrl: 'http://localhost:8080/file/upload',
fileList: [],
isUpload: false
},
methods: {
handleExceed(files, fileList) {
this.$message.warning(`当前限制选择 5 个文件，本次选择了 ${
files.length} 个文件，共选择了 ${
files.length + fileList.length} 个文件`);
},
handleUploadError(error, file) {
this.$notify.error({
title: 'error',
message: '上传出错:' + error,
type: 'error',
position: 'bottom-right'
})
},
handleBeforeUpload(file) {
this.isUpload = file.size / (1024 * 10) <= 1 ? '1' : '0'
if (this.isUpload === '0') {
this.$message({
message: '上传文件大小不能超过10k',
type: 'error'
})
}
return this.isUpload === '1' ? true : false
},
onSuccess() {
this.$message.success(`上传成功！`)
},
handleDownLoad() {
window.location.href = `http://localhost:8080/file/download?fileName=` + this.form.fileName
}
}
})
</script>
</html>
- uploadUrl：data 中的属性。指的是上传到后台的地址
- 主要是 el-upload 标签，当点击“点击上传”按钮时，选择文件后，会自动提交（auto-upload）到后台，auto-upload 属性默认为 true，可修改。
前台页面：
上传：可以上传多个文件，最多5个，但每次只能上传一个文件，需要上传多次。然后，文件大小不能超过 10 Kb（handleBeforeUpload()方法中有校验）。否则，上传失败。
下载：前端的下载就是通过链接访问后台地址即可。这里的 fileName 是作为一个测试的下载文件，你可以换成其他的文件，只要本地磁盘存在这个文件就行（重点看后台代码逻辑，在下面呢）。
2.3.1.2 后端
后台是一个父子关系的多模块项目。不太熟悉的话，可以参考此博文：
Maven 多模块项目的创建与配置
项目结构图
父 POM 文件
<?xml version="1.0" encoding="UTF-8"?>
...
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.0.2.RELEASE</version>
</parent>
<properties>
<!-- 在properties中统一控制依赖包的版本，更清晰-->
<lombok.version>1.18.8</lombok.version>
<junit.test.version>4.11</junit.test.version>
</properties>
<dependencyManagement>
<dependencies>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<version>${lombok.version}</version
最低0.47元/天 解锁文章
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
