SpringBoot+Vue前后端分离，两种⽂件上传⽅式总结
在Vue.js 中，如果⽹络请求使⽤ axios ，并且使⽤了 ElementUI 库，那么⼀般来说，⽂件上传有两种不同的实现⽅案：
1. 通过 Ajax 实现⽂件上传
2. 通过 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 = ServletContext().getRealPath("/upload") + format;
File folder = new File(realPath);
if (!ists()) {
folder.mkdirs();
}
String oldName = OriginalFilename();
String newName = UUID.randomUUID().toString() + oldName.substring(oldName.lastIndexOf("."));
String url = Scheme() + "://" + ServerName() + ":" + ServerPort() + "/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.$file;
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);
}
})
}
关于这段上传核⼼逻辑，解释如下：
1. ⾸先利⽤ Vue 中的 $refs 查到存放⽂件的元素。
2. type 为 file 的 input 元素内部有⼀个 files 数组，⾥边存放了所有选择的 file，由于⽂件上传时，⽂件可以多选，因此这⾥拿到的 files
对象是⼀个数组。
3. 从 files 对象中，获取⾃⼰要上传的⽂件，由于这⾥是单选，所以其实就是数组中的第⼀项。
4. 构造⼀个 FormData ，⽤来存放上传的数据,FormData 不可以像 Java 中的 StringBuffer 使⽤链式配置。
5. 构造好 FromData 后，就可以直接上传数据了，FormData 就是要上传的数据。
6. ⽂件上传注意两点，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
: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>
1. show-file-list 表⽰是否展⽰上传⽂件列表，默认为true，这⾥设置为不展⽰。
2. before-upload 表⽰上传之前的回调，可以在该⽅法中，做⼀些准备⼯作，例如展⽰⼀个进度条给⽤户。
3. on-success 和 on-error 分别表⽰上传成功和失败时候的回调，可以在这两个⽅法中，给⽤户⼀个相应的提⽰，如果有进度条，还需要
在这两个⽅法中关闭进度条。
4. action 指⽂件上传地址。
5. 上传按钮的点击状态和图标都设置为变量，在⽂件上传过程中，修改上传按钮的点击状态为不可点击，同时修改图标为⼀个正在加载
的图标 loading。jquery框架使用
6. 上传的⽂本也设为变量，默认上传 button 的⽂本是数据导⼊，当开始上传后，将个 button 上的⽂本修改为正在导⼊。
相应的回调如下：
onSuccess(response, file, fileList) {
this.uploadBtnIcon = 'el-icon-upload2';
this.btnText = '数据导⼊';
},
onError(err, file, fileList) {
this.uploadBtnIcon = 'el-icon-upload2';
this.btnText = '数据导⼊';
},
beforeUpload(file) {
this.uploadBtnIcon = 'el-icon-loading';
this.btnText = '正在导⼊';
}
1. 在⽂件开始上传时，修改上传按钮为不可点击，同时修改上传按钮的图标和⽂本。
2. ⽂件上传成功或者失败时，修改上传按钮的状态为可以点击，同时恢复上传按钮的图标和⽂本。
上传效果图如下：
总结
两种上传⽅式各有优缺点：
1. 第⼀种⽅式最⼤的优势是通⽤，⼀招鲜吃遍天，到哪⾥都能⽤，但是对于上传过程的监控，进度条的展⽰等等逻辑都需要⾃⼰来实
现。
2. 第⼆种⽅式不够通⽤，因为它是 ElementUI 中的组件，得引⼊ ElementUI 才能使⽤，不过这种⽅式很明显有需多⽐较⽅便的回调，可
以实现⾮常⽅便的处理常见的各种上传问题。
3. 常规的上传需求第⼆种⽅式可以满⾜，但是如果要对上传的⽅法进⾏定制，则还是建议使⽤第⼀种上传⽅案。
关注【江南⼀点⾬】，专注于 Spring Boot+微服务，定期视频教程分享，关注后回复 Java ，领取松哥为你精⼼准备的 Java ⼲货！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。