Spring Boot + Vue，手把手教你做文件上传
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 控件，各自都有自己的文件上传组件，具体使用可以参考各自文档。
好了，废话不多说，看视频（本视频节选自松哥自制的 Spring Boot2 系列视频教程第 16 章微人事实战，本集是微人事实战视频教程第 101 集）：
总结
两种上传方式各有优缺点：
- 第一种方式最大的优势是通用，一招鲜吃遍天，到哪里都能用，但是对于上传过程的监控，进度条的展示等等逻辑都需要自己来实现。
- 第二种方式不够通用，因为它是 ElementUI 中的组件，得引入 ElementUI 才能使用，不过这种方式很明显有需多比较方便的回调，可以实现非常方便的处理常见的各种上传问题。
- 常规的上传需求第二种方式可以满足，但是如果要对上传的方法进行定制，则还是建议使用第一种上传方案。