在Vue.js 中,若是网络请求使用 axios ,而且使用了 ElementUI 库,那么通常来讲,文件上传有两种不一样的实现方案:html
经过 Ajax 实现文件上传
经过 ElementUI 里边的 Upload 组件实现文件上传
两种方案,各有优缺点,咱们分别来看。前端
准备工做
首先咱们须要一点点准备工做,就是在后端提供一个文件上传接口,这是一个普通的 Spring Boot 项目,以下:java
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 给文件重命名。ios
这里为了简化代码,我省略掉了异常捕获,上传结果直接返回成功,后端代码大伙可根据本身的实际状况自行修改。axios
Ajax 上传
在 Vue 中,经过 Ajax 实现文件上传,方案和传统 Ajax 实现文件上传基本上是一致的,惟一不一样的是查找元素的方式。后端
导入数据
在这里,首先提供一个文件导入 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'
}
});
}
通过这几步的配置后,前端就算上传完成了,能够进行文件上传了。app
使用 Upload 组件
若是使用 Upload ,则须要引入 ElementUI,因此通常建议,若是使用了 ElementUI 作 UI 控件的话,则能够考虑使用 Upload 组件来实现文件上传,若是没有使用 ElementUI 的话,则不建议使用 Upload 组件,至于其余的 UI 控件,各自都有本身的文件上传组件,具体使用能够参考各自文档。
style="display: inline"
:show-file-list="false"
:on-success="onSuccess"
:on-error="onError"
:before-upload="beforeUpload"
action="/system/basic/jl/import">
{{btnText}}
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 才能使用,不过这种方式很明显有需多比较方便的回调,能够实现很是方便的处理常见的各类上传问题。
常规的上传需求第二种方式能够知足,可是若是要对上传的方法进行定制,则仍是建议使用第一种上传方案。
关注公众号【江南一点雨】,专一于 Spring Boot+微服务以及先后端分离等全栈技术,按期视频教程分享,关注后回复 Java ,领取松哥为你精心准备的 Java 干货!