仵航说前后端分离，文件上传下载（springBoot+vue+elementUI）仵老大（前后端分离怎么传文件）

25-03-03 9

在本文中，我们将为您详细介绍仵航说前后端分离，文件上传下载的相关知识，并且为您解答关于springBoot+vue+elementUI仵老大的疑问，此外，我们还会提供一些关于demo之springbo

在本文中，我们将为您详细介绍仵航说前后端分离，文件上传下载的相关知识，并且为您解答关于springBoot+vue+elementUI仵老大的疑问，此外，我们还会提供一些关于demo 之 springboot-vue-nginx 前后端分离跨域配置、Spring Boot + Vue Element 实现 Excel 文件上传、解析、下载（含完整实现过程）、Spring Boot + Vue 前后端分离，两种文件上传方式总结、Spring Boot + Vue 前后端分离，两种文件上传方式总结！的有用信息。

本文目录一览：

仵航说前后端分离，文件上传下载（springBoot+vue+elementUI）仵老大（前后端分离怎么传文件）
demo 之 springboot-vue-nginx 前后端分离跨域配置
Spring Boot + Vue Element 实现 Excel 文件上传、解析、下载（含完整实现过程）
Spring Boot + Vue 前后端分离，两种文件上传方式总结
Spring Boot + Vue 前后端分离，两种文件上传方式总结！

仵航说前后端分离，文件上传下载（springBoot+vue+elementUI）仵老大（前后端分离怎么传文件）

1. 介绍

本文主要是介绍前后端分离的上传下载，后端使用的是 SpringBoot, 持久层用的是 mybatis-plus, 前端用的 Vue,UI 用的 elementUI, 测试了一下，文本，图片，excel, 都是可以上传下载的，前端就是一个页面，后端就是一个 controller 页面，就可以解决
代码不清晰的话，我把这个前端的 vue 跟后端的 controller 代码，以及本篇文章的 MD 版本放到了这个链接里 https://wwa.lanzous.com/b0cqr478f 密码：19qb

1.1 前端样子

2. 前端

2.1 先分享一下前端的全部代码

<template> <div> <center> </center> <div ><!--  <router-link to="/reportTools/customQuery" >--><!--  上一步--><!--  </router-link>-->  <el-button type="primary" v-on:click="tocustomQuery" >上一步</el-button> </div> <div >  <el-button type="primary" v-on:click="saveResource" >保存</el-button> </div>  <br>  <h1>基本信息设置</h1> <br> <br> <center> <div > <el-form ref="form" :model="form" label-width="120px" > <el-form-item label="报表名称中文:" >  <el-input v-model="form.reportName" ></el-input> </el-form-item> <el-form-item label="报表名称英文:" >  <el-input v-model="form.reportEnName"></el-input> </el-form-item> <el-form-item label="报表名称中英文:" >  <el-input v-model="form.reportChEnName"></el-input> </el-form-item> <el-form-item label="报表备注:" >  <el-input v-model="form.remarks"></el-input> </el-form-item> <el-form-item label="功能编号" >  <el-input v-model="form.code" ></el-input> </el-form-item> <el-form-item label="编辑模板:" >  <el-input placeholder="模板地址" disabled></el-input>  <el-upload     :action="uploadUrl"     :before-upload="handleBeforeUpload"     :on-error="handleUploadError"     :before-remove="beforeRemove"     multiple     :limit="5"     :on-exceed="handleExceed"     :file-list="fileList">  <el-button size="small" type="primary">点击上传</el-button>  </el-upload>  <a href="http://localhost:8080/file/download?fileName=test.xls">下载附件</a> </el-form-item> <el-form-item label="模板备注:" >  模板用于下载，打印EXCEL时使用。其中&#123;&nbsp;{CURRENT_USER&#125;&nbsp;&#125;表示当前用户名，  &#123;&nbsp;{TITLE&#125;&nbsp;&#125;表示表头，&#123;&nbsp;{DATA&#125;&nbsp;&#125;表示数据行，&#123;&nbsp;{FOOTER&#125;&nbsp;&#125;表示页脚区域。  导出的内容不可改动，页眉页脚区域可以自由编辑。 </el-form-item> <el-form-item >  <el-select v-model="form.isPublic" >  <el-option label="私有查询" value="2" ></el-option>  <el-option label="公共查询" value="1"></el-option>  </el-select> </el-form-item> <el-form-item >  <el-checkbox label="是否打印" v-model="form.isPrinting" true-label="1" false-label="2"></el-checkbox>  <el-checkbox label="是否导出" v-model="form.isExport" true-label="1" false-label="2"></el-checkbox>  <el-form-item type="hidden" >  </el-form-item> </el-form-item> </el-form> </div> </center> </div></template><script>import axios from ''axios''import { uuid } from ''vue-uuid'';export default { data() { return {  form: {  reportName:'''',  reportEnName:'''',  reportChEnName:'''',  remarks:'''',  code:'''',  isPublic:''1'',  isPrinting:"1",  isExport:"1",  datas:[{},{},{},{}],  A0010011:'''',  A0010012:'''',  A0010013:'''',  A0010014:'''',  },  // uuid1:'''',  // cusList:{},  uploadUrl: ''file/upload'',  fileList: [], } }, created() { console.log("上个页面传来的是",sessionStorage) // this.handleUUIDv1() this.form.code = this.$uuid.v1() console.log("页面刷新后新产生的uuid是",this.form.code) }, watch:{ reportName: function (newVal,oldVal) {//新值和原值  console.log("name改变了 a:"+newVal+" b:"+oldVal) } }, methods: { //使用uuid // handleUUIDv1() { // this.uuid1 = this.$uuid.v1() // }, //点击多选按钮true和false变成1或者2 reset(form){  this.$refs[''form''].resetFields(); }, //获取上个页面传来的数据 getcustomQuery() {  let reportName=this.form.reportName  sessionStorage.setItem("reportName",reportName)  let reportEnName = this.form.reportEnName  sessionStorage.setItem("reportEnName",reportEnName)  let reportChEnName = this.form.reportChEnName  sessionStorage.setItem("reportChEnName",reportChEnName)  let remarks = this.form.remarks  sessionStorage.setItem("remarks",remarks)  let code = this.form.code  sessionStorage.setItem("code",code)  let isPublic = this.form.isPublic  sessionStorage.setItem("isPublic",isPublic)  let isPrinting = this.form.isPrinting  sessionStorage.setItem("isPrinting",isPrinting)  let isExport = this.form.isExport  sessionStorage.setItem("isExport",isExport)  console.log("上个页面传来的是",sessionStorage) }, // this.$router.push(''/reportTools/cusMain''),点击保存发送链接 并跳转 tocustomQuery(){  this.$router.push(''/reportTools/customQuery'') }, saveResource(){  console.log("当前页面表单的数据",this.form)  // sessionStorage.setItem("params",JSON.stringify(this.form))  console.log("sessionStorage中的数据",sessionStorage)  this.getcustomQuery()  this.$http.post("http://localhost:8080/reporttools/report-show/addReportShow",sessionStorage).then(  resp=>{  console.log(resp)   //this.$router.push(''/reportTools/cusMain'')  }) }, handleExceed(files, fileList) {  this.$message.warning(`当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`); }, beforeRemove(file, fileList) {  return this.$confirm(`确定移除 ${ file.name }？`); }, handleUploadError(error, file) {  console.log("文件上传出错："+error) }, //测试上传文件(注意web的上下文) handleBeforeUpload(file){  console.log("开始上传，上传的文件为："+file)  let formData = new FormData();  formData.append("multipartFiles", file);  axios({  method: ''post'',  url: ''file/upload'',  data: formData,  headers: {''Content-Type'': ''multipart/form-data'' }  }).then((res) => {  console.log("文件上传返回："+res)  }).catch(error => {  console.log("文件上传异常:"+error)  }) }, }}</script><style scoped>a { text-decoration: none;}</style>

2.2 分享一下前端 template 层的代码

2.2.1 上传下载 template 全部代码

<el-upload     :action="uploadUrl"     :before-upload="handleBeforeUpload"     :on-error="handleUploadError"     :before-remove="beforeRemove"     multiple     :limit="5"     :on-exceed="handleExceed"     :file-list="fileList">  <el-button size="small" type="primary">点击上传</el-button>  </el-upload>  <a href="http://localhost:8080/file/download?fileName=test.xls">下载附件</a>

2.2.2 上传代码

<el-upload     :action="uploadUrl"     :before-upload="handleBeforeUpload"     :on-error="handleUploadError"     :before-remove="beforeRemove"     multiple     :limit="5"     :on-exceed="handleExceed"     :file-list="fileList">  <el-button size="small" type="primary">点击上传</el-button>  </el-upload>

2.2.3 下载代码

下载代码就是一个 a 标签

 <a href="http://localhost:8080/file/download?fileName=test.xls">下载附件</a>

2.3 分享一下前端 script 代码

<script>import axios from ''axios''import { uuid } from ''vue-uuid'';export default { data() { return {  form: {  reportName:'''',  reportEnName:'''',  reportChEnName:'''',  remarks:'''',  code:'''',  isPublic:''1'',  isPrinting:"1",  isExport:"1",  datas:[{},{},{},{}],  A0010011:'''',  A0010012:'''',  A0010013:'''',  A0010014:'''',  },  // uuid1:'''',  // cusList:{},  uploadUrl: ''file/upload'',  fileList: [], } }, created() { console.log("上个页面传来的是",sessionStorage) // this.handleUUIDv1() this.form.code = this.$uuid.v1() console.log("页面刷新后新产生的uuid是",this.form.code) }, watch:{ reportName: function (newVal,oldVal) {//新值和原值  console.log("name改变了 a:"+newVal+" b:"+oldVal) } }, methods: { //使用uuid // handleUUIDv1() { // this.uuid1 = this.$uuid.v1() // }, //点击多选按钮true和false变成1或者2 reset(form){  this.$refs[''form''].resetFields(); }, //获取上个页面传来的数据 getcustomQuery() {  let reportName=this.form.reportName  sessionStorage.setItem("reportName",reportName)  let reportEnName = this.form.reportEnName  sessionStorage.setItem("reportEnName",reportEnName)  let reportChEnName = this.form.reportChEnName  sessionStorage.setItem("reportChEnName",reportChEnName)  let remarks = this.form.remarks  sessionStorage.setItem("remarks",remarks)  let code = this.form.code  sessionStorage.setItem("code",code)  let isPublic = this.form.isPublic  sessionStorage.setItem("isPublic",isPublic)  let isPrinting = this.form.isPrinting  sessionStorage.setItem("isPrinting",isPrinting)  let isExport = this.form.isExport  sessionStorage.setItem("isExport",isExport)  console.log("上个页面传来的是",sessionStorage) }, // this.$router.push(''/reportTools/cusMain''),点击保存发送链接 并跳转 tocustomQuery(){  this.$router.push(''/reportTools/customQuery'') }, saveResource(){  console.log("当前页面表单的数据",this.form)  // sessionStorage.setItem("params",JSON.stringify(this.form))  console.log("sessionStorage中的数据",sessionStorage)  this.getcustomQuery()  this.$http.post("http://localhost:8080/reporttools/report-show/addReportShow",sessionStorage).then(  resp=>{  console.log(resp)   //this.$router.push(''/reportTools/cusMain'')  }) }, handleExceed(files, fileList) {  this.$message.warning(`当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`); }, beforeRemove(file, fileList) {  return this.$confirm(`确定移除 ${ file.name }？`); }, handleUploadError(error, file) {  console.log("文件上传出错："+error) }, //测试上传文件(注意web的上下文) handleBeforeUpload(file){  console.log("开始上传，上传的文件为："+file)  let formData = new FormData();  formData.append("multipartFiles", file);  axios({  method: ''post'',  url: ''http://localhost:8080/file/upload'',  data: formData,  headers: {''Content-Type'': ''multipart/form-data'' }  }).then((res) => {  console.log("文件上传返回："+res)  }).catch(error => {  console.log("文件上传异常:"+error)  }) }, }}</script><style scoped>a { text-decoration: none;}</style>

2.3.1 上传 script 全部代码

主要是对前端做一些限制

handleExceed(files, fileList) { this.$message.warning(`当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);},beforeRemove(file, fileList) { return this.$confirm(`确定移除 ${ file.name }？`);},handleUploadError(error, file) { console.log("文件上传出错："+error)},//测试上传文件(注意web的上下文)handleBeforeUpload(file){ console.log("开始上传，上传的文件为："+file) let formData = new FormData(); formData.append("multipartFiles", file); axios({ method: ''post'', url: ''http://localhost:8080/file/upload'', data: formData, headers: {''Content-Type'': ''multipart/form-data'' } }).then((res) => { console.log("文件上传返回："+res) }).catch(error => { console.log("文件上传异常:"+error) })},

2.3.2 在 data 的 return 里添加

 uploadUrl: ''file/upload'', fileList: [],

也就是在 data 层的 return 里写

data(){ return { 	 uploadUrl: ''http://localhost:8080/file/upload'', 		fileList: [],	}}

就这样前端就完成了

后端主要就是一个 controller 层

2.3.3Axios 的引入

很重要的一个，因为我的写法不一样可能有不兼容的地方，有的 vue 不能这么写，所以需要引入一下

直接引入就可以，在 script 里面，

demo 之 springboot-vue-nginx 前后端分离跨域配置

nginx-springboot-vue 前后端分离跨域配置

引言

接着上篇 —— 简单的 springboot-vue 前后端分离登录 Session 拦截的 demo，其中跨域是通过 springboot 后端全局设置的，但是碰到了奇怪的问题，用了个不优雅的方式解决。
于是想到使用 Nginx 跨域应该就不会如此了。

windows 下载安装

http://nginx.org/ 下载稳定版，解压缩。
查看配置文件 /nginx-1.16.0/conf/nginx.conf :

#gzip  on;

    server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   html;
            index  index.html index.htm;
        }

        #error_page  404              /404.html;

默认监听端口是 80，/ 是相对路径下的 html 目录。

windows 下查看一个端口占用情况 netstat -ano|findstr 3306
输出：
TCP 0.0.0.0:3306 0.0.0.0:0 LISTENING 3448
TCP [::]:3306 [::]:0 LISTENING 3448
查看占用此端口的是哪个进程 tasklist|findstr 3448
输出：
mysqld.exe 3448 Services 0 163,952 K
根据 PID 杀掉进程（强行）taskkill /pid #{pid} /F
（当然可以打开任务管理器直接干掉）
根据关键字查询目标进程 tasklist|findstr mysql

确定端口没被占用后，默认的 80 端口先跑起来。

进入安装目录 dos 输入 start nginx，一闪而过正常，== 不要使用双击 exe 方式 ==
查看验证 nginx 80 端口情况 tasklist|findstr nginx
确定无误，浏览器键入 localhost:80 显示 Nginx 欢迎页，OK

打包部署 vue-cli 项目

修改默认 80 端口为自定义端口 8081

/conf/nginx.conf 的 server.listen 80 >> 8081
重载配置重启：nginx.exe -s reload

nginx 常用命令（==windows-dos 环境加.exe 后缀，比如 nginx.exe -t==）
（cd 到安装跟目录执行命令，比如 xxx/nginx-1.16.0/）

start nginx 启动
nginx -v 查看Nginx的版本号
nginx -t 检查配置文件的有效性
nginx -s 立即关闭
nginx -s quit	处理完当前的请求后关闭
nginx -s reload	修改完配置文件后重载
nginx -s reopen	打开日志文件

打包部署 vue-cli 项目

进入 vue 项目根目录执行 cnpm run build
将生成的 dist 目录放置 nginx 根目录下的 html 目录下（/nginx-1.16.0/html/dist）
修改 nginx 配置文件中的 location

location / {
            root   html/dist;
            index  index.html index.htm;
        }

验证配置 nginx.exe -t，重载配置 nginx.exe -s reload
刷新 8081 页面

Nginx 跨域配置

未使用 Nginx 之前，Java 后端跨域
springboot 后端配置全局跨域，允许这个 8081 的请求跨域，这样优点是任何接口调用方的前端代码和 nginx 配置不用变化，但前提是后端是我自己开发的 XD..
开始尝试 Nginx 的跨域配置
注掉 springboot 的全局跨域配置，取消 vue 中 axios.defaults.baseURL，baseURL 的作用也交给 Nginx 的 proxy_pass。
完整配置 demo 初版（已测）

#user  nobody;
# 启动多worker进程
#worker_processes  1;
worker_processes  auto;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    log_format  main  ''$remote_addr - $remote_user [$time_local] "$request" ''
                      ''$status $body_bytes_sent "$http_referer" ''
                      ''"$http_user_agent" "$http_x_forwarded_for"'';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

	# 启用gzip压缩
	gzip  on;
    #gzip  on;

    server {
		# nginx服务器对外8081端口
        listen       8081;
        server_name  localhost;

        #charset koi8-r;

		# 日志输出
        access_log  logs/myvue.access.log  main;
        #access_log  logs/host.access.log  main;

		# 静态文件配置
        location / {
            root   html/dist;
            index  index.html index.htm;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

		# 反向代理springboot接口服务
		location /api/ {
			# 前端请求: /api/login 代理后: http://127.0.0.1:8080/login
			proxy_pass http://127.0.0.1:8080/;
			# 解决springboot中获取远程ip的问题
			proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
			proxy_http_version 1.1;
	        proxy_set_header Connection "";
        }
		
        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

心得

3 种解决跨域的方式
- 直接使用 vue 的跨域设置（proxyTable，开发环境本地调试用）
- 使用 Nginx 代理配置（即本文 proxy_pass，开发到上线）
- springboot 后端配置跨域（addCorsMappings 一劳永逸，前端无关性）
如果后端是也自己开发的话，直接后端（如 springboot）配置跨域是很方便的
开发时使用 vue 的跨域设置，上线时则使用 Nginx 的配置（一般会用到集群配置），这样的搭配也很 nice

碰到的问题

Windows-dos 下使用 nginx -s stop; nginx -s reload 等喜闻乐见命令时，报找不到命令。

上面通用的是 Linux 环境的，windows-dos 下使用这种 nginx.exe -s stop。

可以继续折腾的主题（链接坑待填）

Nginx 配置文件服务器（上传下载）
Nginx 集群 (负载均衡) 配置与 Session 问题

Spring Boot + Vue Element 实现 Excel 文件上传、解析、下载（含完整实现过程）

最近用 Spring Boot 和 Vue Element 实现了一个微型项目，该项目自构思到第一个版本的实现用了 1 个月的时间。

时间从下班吃过晚饭，加班到 11 点做的；但是从功能实现到细节优化用了 3 个月的时间。

“做” 是一回事，“做好” 是另外一回事。当然花了 3 倍的工作量，也不见得就做的很到位。

闲话少叙，言归正传。本文介绍我用 SpringBoot 和 Vue 实现的文件上传功能。

1. 实话说，做一个文件上传并不难。方法无外乎利用自己以前写的代码，或者用搜索引擎参考别人的代码。

本文中写的方法，参考了网上的例子，参考了几篇博文（实在不好意思，当时的链接未保存），在此表示感谢，就不一一列举。

先上效果图：

点击 “导入数据”，会弹出一个对话框，选择 Excel 文件：

点击 “导出数据”，会从后台查询数据后生成一个 Excel 文件。

2. 前端 Vue Element 部分，导入通过 el-upload 实现，导出通过 el-button 实现。其中 beforUpload 和 exportData 代码如下：

3. 后端 Spring boot 部分，上传普通 txt 等文件的 Controller 中的方法

上传 Excel 文件的 Controller 中的方法：

业务逻辑部分对应的代码：

导出 Excel 对应 Controller 中的方法：

其中 POIUtils 是用来从 Mysql 数据库中查询数据，然后生成一个 Excel 文件并写到输出流中。

生成 Excel 用的是 Apache 的 POI，然后参考网上实现的代码自己封装了一个 Util 类，其核心代码如下：

Spring Boot + Vue 前后端分离，两种文件上传方式总结

在Vue.js 中，如果网络请求使用 axios ，并且使用了 ElementUI 库，那么一般来说，文件上传有两种不同的实现方案：

通过 Ajax 实现文件上传
通过 ElementUI 里边的 Upload 组件实现文件上传

两种方案，各有优缺点，我们分别来看。

准备工作

首先我们需要一点点准备工作，就是在后端提供一个文件上传接口，这是一个普通的 Spring Boot 项目，如下：

SimpleDateFormat sdf = new SimpleDateFormat("/yyyy/MM/dd/");
@PostMapping("/import")
public RespBean importData(MultipartFile file, HttpServletRequest req) throws IOException {
    String format = sdf.format(new Date());
    String realPath = req.getServletContext().getRealPath("/upload") + format;
    File folder = new File(realPath);
    if (!folder.exists()) {
        folder.mkdirs();
    }
    String oldName = file.getOriginalFilename();
    String newName = UUID.randomUUID().toString() + oldName.substring(oldName.lastIndexOf("."));
    file.transferTo(new File(folder,newName));
    String url = req.getScheme() + "://" + req.getServerName() + ":" + req.getServerPort() + "/upload" + format + newName;
    System.out.println(url);
    return RespBean.ok("上传成功!");
}

这里的文件上传比较简单，上传的文件按照日期进行归类，使用 UUID 给文件重命名。

这里为了简化代码，我省略掉了异常捕获，上传结果直接返回成功，后端代码大伙可根据自己的实际情况自行修改。

Ajax 上传

在 Vue 中，通过 Ajax 实现文件上传，方案和传统 Ajax 实现文件上传基本上是一致的，唯一不同的是查找元素的方式。

<input type="file" ref="myfile">
<el-button @click="importData" type="success" size="mini" icon="el-icon-upload2">导入数据</el-button>

在这里，首先提供一个文件导入 input 组件，再来一个导入按钮，在导入按钮的事件中来完成导入的逻辑。

importData() {
  let myfile = this.$refs.myfile;
  let files = myfile.files;
  let file = files[0];
  var formData = new FormData();
  formData.append("file", file);
  this.uploadFileRequest("/system/basic/jl/import",formData).then(resp=>{
    if (resp) {
      console.log(resp);
    }
  })
}

关于这段上传核心逻辑，解释如下：

首先利用 Vue 中的 $refs 查找到存放文件的元素。
type 为 file 的 input 元素内部有一个 files 数组，里边存放了所有选择的 file，由于文件上传时，文件可以多选，因此这里拿到的 files 对象是一个数组。
从 files 对象中，获取自己要上传的文件，由于这里是单选，所以其实就是数组中的第一项。
构造一个 FormData ，用来存放上传的数据,FormData 不可以像 Java 中的 StringBuffer 使用链式配置。
构造好 FromData 后，就可以直接上传数据了，FormData 就是要上传的数据。
文件上传注意两点，1. 请求方法为 post，2. 设置 Content-Type 为 multipart/form-data 。

这种文件上传方式，实际上就是传统的 Ajax 上传文件，和大家常见的 jQuery 中写法不同的是，这里元素查找的方式不一样（实际上元素查找也可以按照JavaScript 中原本的写法来实现），其他写法一模一样。这种方式是一个通用的方式，和使用哪一种前端框架无关。最后再和大家来看下封装的上传方法：

export const uploadFileRequest = (url, params) => {
  return axios({
    method: ''post'',
    url: `${base}${url}`,
    data: params,
    headers: {
      ''Content-Type'': ''multipart/form-data''
    }
  });
}

经过这几步的配置后，前端就算上传完成了，可以进行文件上传了。

使用 Upload 组件

如果使用 Upload ，则需要引入 ElementUI，所以一般建议，如果使用了 ElementUI 做 UI 控件的话，则可以考虑使用 Upload 组件来实现文件上传，如果没有使用 ElementUI 的话，则不建议使用 Upload 组件，至于其他的 UI 控件，各自都有自己的文件上传组件，具体使用可以参考各自文档。

<el-upload
  style="display: inline"
  :show-file-list="false"
  :on-success="onSuccess"
  :on-error="onError"
  :before-upload="beforeUpload"
  action="/system/basic/jl/import">
  <el-button size="mini" type="success" :disabled="!enabledUploadBtn" :icon="uploadBtnIcon">{{btnText}}</el-button>
</el-upload>

show-file-list 表示是否展示上传文件列表，默认为true，这里设置为不展示。
before-upload 表示上传之前的回调，可以在该方法中，做一些准备工作，例如展示一个进度条给用户。
on-success 和 on-error 分别表示上传成功和失败时候的回调，可以在这两个方法中，给用户一个相应的提示，如果有进度条，还需要在这两个方法中关闭进度条。
action 指文件上传地址。
上传按钮的点击状态和图标都设置为变量，在文件上传过程中，修改上传按钮的点击状态为不可点击，同时修改图标为一个正在加载的图标 loading。
上传的文本也设为变量，默认上传 button 的文本是 数据导入 ，当开始上传后，将找个 button 上的文本修改为 正在导入。

相应的回调如下：

onSuccess(response, file, fileList) {
  this.enabledUploadBtn = true;
  this.uploadBtnIcon = ''el-icon-upload2'';
  this.btnText = ''数据导入'';
},
onError(err, file, fileList) {
  this.enabledUploadBtn = true;
  this.uploadBtnIcon = ''el-icon-upload2'';
  this.btnText = ''数据导入'';
},
beforeUpload(file) {
  this.enabledUploadBtn = false;
  this.uploadBtnIcon = ''el-icon-loading'';
  this.btnText = ''正在导入'';
}

在文件开始上传时，修改上传按钮为不可点击，同时修改上传按钮的图标和文本。
文件上传成功或者失败时，修改上传按钮的状态为可以点击，同时恢复上传按钮的图标和文本。

上传效果图如下：

总结

两种上传方式各有优缺点：

第一种方式最大的优势是通用，一招鲜吃遍天，到哪里都能用，但是对于上传过程的监控，进度条的展示等等逻辑都需要自己来实现。
第二种方式不够通用，因为它是 ElementUI 中的组件，得引入 ElementUI 才能使用，不过这种方式很明显有需多比较方便的回调，可以实现非常方便的处理常见的各种上传问题。
常规的上传需求第二种方式可以满足，但是如果要对上传的方法进行定制，则还是建议使用第一种上传方案。

来源于： https://www.cnblogs.com/lenve/p/10782774.html

Spring Boot + Vue 前后端分离，两种文件上传方式总结！

松哥原创的 Spring Boot 视频教程已经杀青，感兴趣的小伙伴戳这里 --> 松哥要升级 SpringBoot 视频了，看看新增了哪些内容！

在 Vue.js 中，如果网络请求使用 axios ，并且使用了 ElementUI 库，那么一般来说，文件上传有两种不同的实现方案：

通过 Ajax 实现文件上传
通过 ElementUI 里边的 Upload 组件实现文件上传

两种方案，各有优缺点，我们分别来看。

准备工作

首先我们需要一点点准备工作，就是在后端提供一个文件上传接口，这是一个普通的 Spring Boot 项目，如下：

SimpleDateFormat sdf = new SimpleDateFormat("/yyyy/MM/dd/");
@PostMapping("/import")
public RespBean importData(MultipartFile file, HttpServletRequest req) throws IOException {
    String format = sdf.format(new Date());
    String realPath = req.getServletContext().getRealPath("/upload") + format;
    File folder = new File(realPath);
    if (!folder.exists()) {
        folder.mkdirs();
    }
    String oldName = file.getOriginalFilename();
    String newName = UUID.randomUUID().toString() + oldName.substring(oldName.lastIndexOf("."));
    file.transferTo(new File(folder,newName));
    String url = req.getScheme() + "://" + req.getServerName() + ":" + req.getServerPort() + "/upload" + format + newName;
    System.out.println(url);
    return RespBean.ok("上传成功!");
}

这里的文件上传比较简单，上传的文件按照日期进行归类，使用 UUID 给文件重命名。

这里为了简化代码，我省略掉了异常捕获，上传结果直接返回成功，后端代码大伙可根据自己的实际情况自行修改。

Ajax 上传

在 Vue 中，通过 Ajax 实现文件上传，方案和传统 Ajax 实现文件上传基本上是一致的，唯一不同的是查找元素的方式。

<input type="file" ref="myfile">
<el-button @click="importData" type="success" size="mini" icon="el-icon-upload2">导入数据</el-button>

在这里，首先提供一个文件导入 input 组件，再来一个导入按钮，在导入按钮的事件中来完成导入的逻辑。

importData() {
  let myfile = this.$refs.myfile;
  let files = myfile.files;
  let file = files[0];
  var formData = new FormData();
  formData.append("file", file);
  this.uploadFileRequest("/system/basic/jl/import",formData).then(resp=>{
    if (resp) {
      console.log(resp);
    }
  })
}

关于这段上传核心逻辑，解释如下：

首先利用 Vue 中的 $refs 查找到存放文件的元素。
type 为 file 的 input 元素内部有一个 files 数组，里边存放了所有选择的 file，由于文件上传时，文件可以多选，因此这里拿到的 files 对象是一个数组。
从 files 对象中，获取自己要上传的文件，由于这里是单选，所以其实就是数组中的第一项。
构造一个 FormData ，用来存放上传的数据，FormData 不可以像 Java 中的 StringBuffer 使用链式配置。
构造好 FromData 后，就可以直接上传数据了，FormData 就是要上传的数据。
文件上传注意两点，1. 请求方法为 post，2. 设置 Content-Type 为 multipart/form-data 。

这种文件上传方式，实际上就是传统的 Ajax 上传文件，和大家常见的 jQuery 中写法不同的是，这里元素查找的方式不一样（实际上元素查找也可以按照 JavaScript 中原本的写法来实现），其他写法一模一样。这种方式是一个通用的方式，和使用哪一种前端框架无关。最后再和大家来看下封装的上传方法：

export const uploadFileRequest = (url, params) => {
  return axios({
    method: ''post'',
    url: `${base}${url}`,
    data: params,
    headers: {
      ''Content-Type'': ''multipart/form-data''
    }
  });
}

经过这几步的配置后，前端就算上传完成了，可以进行文件上传了。

使用 Upload 组件

<el-upload
  style="display: inline"
  :show-file-list="false"
  :on-success="onSuccess"
  :on-error="onError"
  :before-upload="beforeUpload"
  action="/system/basic/jl/import">
  <el-button size="mini" type="success" :disabled="!enabledUploadBtn" :icon="uploadBtnIcon">{{btnText}}</el-button>
</el-upload>

show-file-list 表示是否展示上传文件列表，默认为 true，这里设置为不展示。
before-upload 表示上传之前的回调，可以在该方法中，做一些准备工作，例如展示一个进度条给用户。
on-success 和 on-error 分别表示上传成功和失败时候的回调，可以在这两个方法中，给用户一个相应的提示，如果有进度条，还需要在这两个方法中关闭进度条。
action 指文件上传地址。
上传按钮的点击状态和图标都设置为变量，在文件上传过程中，修改上传按钮的点击状态为不可点击，同时修改图标为一个正在加载的图标 loading。
上传的文本也设为变量，默认上传 button 的文本是 数据导入 ，当开始上传后，将找个 button 上的文本修改为 正在导入。

相应的回调如下：

onSuccess(response, file, fileList) {
  this.enabledUploadBtn = true;
  this.uploadBtnIcon = ''el-icon-upload2'';
  this.btnText = ''数据导入'';
},
onError(err, file, fileList) {
  this.enabledUploadBtn = true;
  this.uploadBtnIcon = ''el-icon-upload2'';
  this.btnText = ''数据导入'';
},
beforeUpload(file) {
  this.enabledUploadBtn = false;
  this.uploadBtnIcon = ''el-icon-loading'';
  this.btnText = ''正在导入'';
}

在文件开始上传时，修改上传按钮为不可点击，同时修改上传按钮的图标和文本。
文件上传成功或者失败时，修改上传按钮的状态为可以点击，同时恢复上传按钮的图标和文本。

上传效果图如下：

总结

两种上传方式各有优缺点：

第一种方式最大的优势是通用，一招鲜吃遍天，到哪里都能用，但是对于上传过程的监控，进度条的展示等等逻辑都需要自己来实现。
第二种方式不够通用，因为它是 ElementUI 中的组件，得引入 ElementUI 才能使用，不过这种方式很明显有需多比较方便的回调，可以实现非常方便的处理常见的各种上传问题。
常规的上传需求第二种方式可以满足，但是如果要对上传的方法进行定制，则还是建议使用第一种上传方案。

往期推荐

0 1

50+ 需求文档免费下载！

0 2

Spring Security 教程合集

0 3

接了两个私活，都是血汗钱

本文分享自微信公众号 - 江南一点雨（a_javaboy）。
如有侵权，请联系 support@oschina.cn 删除。
本文参与 “OSC 源创计划”，欢迎正在阅读的你也加入，一起分享。

关于仵航说前后端分离，文件上传下载和springBoot+vue+elementUI仵老大的问题就给大家分享到这里，感谢你花时间阅读本站内容，更多关于demo 之 springboot-vue-nginx 前后端分离跨域配置、Spring Boot + Vue Element 实现 Excel 文件上传、解析、下载（含完整实现过程）、Spring Boot + Vue 前后端分离，两种文件上传方式总结、Spring Boot + Vue 前后端分离，两种文件上传方式总结！等相关知识的信息别忘了在本站进行查找喔。

本文标签：