Spring Boot和Vue前后端分离中如何实现文件上传
导读：本文共3989字符，通常情况下阅读需要13分钟。同时您也可以点击右侧朗读，来听本文内容。按键盘←（左） →（右） 方向键可以翻页。
摘要：希望大家仔细阅读，能够学有所成！准备工作首先我们需要一点点准备工作，就是在后端提供一个文件上传接口，这是一个普通的 Spring Boot 项目，如下：/p><pre>SimpleDateFormatsdf=newSimpleDateFormat("/yyyy/MM/dd/");@PostMapping("/import&am... ...
目录
(为您整理了一些要点),点击可以直达。
希望大家仔细阅读，能够学有所成！
首先利用 Vue 中的 $refs 查找到存放文件的元素。
type 为 file 的 input 元素内部有一个 files 数组，里边存放了所有选择的 file，由于文件上传时，文件可以多选，因此这里拿到的 files 对象是一个数组。
从 files 对象中，获取自己要上传的文件，由于这里是单选，所以其实就是数组中的第一项。
构造一个 FormData ，用来存放上传的数据,FormData 不可以像 Java 中的 StringBuffer 使用链式配置。
构造好 FromData 后，就可以直接上传数据了，FormData 就是要上传的数据。
文件上传注意两点，1. 请求方法为 post，2. 设置 Content-Type 为 multipart/form-data 。
show-file-list 表示是否展示上传文件列表，默认为true，这里设置为不展示。
before-upload 表示上传之前的回调，可以在该方法中，做一些准备工作，例如展示一个进度条给用户 。
on-success 和 on-error 分别表示上传成功和失败时候的回调，可以在这两个方法中，给用户一个相应的提示，如果有进度条，还需要在这两个方法中关闭进度条。
action 指文件上传地址。
上传按钮的点击状态和图标都设置为变量 ，在文件上传过程中，修改上传按钮的点击状态为不可点击，同时修改图标为一个正在加载的图标 loading。
上传的文本也设为变量，默认上传 button 的文本是 数据导入 ，当开始上传后，将找个 button 上的文本修改为 正在导入。
在文件开始上传时，修改上传按钮为不可点击，同时修改上传按钮的图标和文本。
文件上传成功或者失败时，修改上传按钮的状态为可以点击，同时恢复上传按钮的图标和文本。
Spring Boot和Vue前后端分离中如何实现文件上传的详细内容，希望对您有所帮助，信息来源于网络。