SpringBoot + Vue 实现文件的上传与下载

最新推荐文章于 2024-08-20 21:38:17 发布

菩提小猿

最新推荐文章于 2024-08-20 21:38:17 发布

阅读量3.1k

点赞数 5

分类专栏： springboot Vue

本文链接：https://blog.csdn.net/Lucky_Boy_Luck/article/details/108501419

版权

本文详细介绍了如何使用SpringBoot后端结合Vue前端实现文件的上传与下载功能。通过ElementUI的Upload组件和Axios，配合后台SpringBoot的处理，实现了文件上传的前端校验、上传与下载操作。同时讨论了如何通过http-request方法处理上传失败的提示，以及使用before-upload方法优化用户体验。

摘要由CSDN通过智能技术生成

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