在Vue.js中，如果网络请求使用axios，使用ElementUI库，一般来说，文件上传有两种不同的实现方式：通过Ajax上传文件通过ElementUI中的Upload组件上传两种选择都有自己的选择优缺点，让我们分开来看。准备工作首先我们需要做一点准备工作，就是在后台提供一个文件上传接口。这是一个普通的SpringBoot项目，如下：));StringrealPath=req.getServletContext().getRealPath("/upload")+format;Filefolder=newFile(realPath);if(!folder.exists()){folder.mkdirs();}StringoldName=file.getOriginalFilename();StringnewName=UUID.randomUUID().toString()+oldName.substring(oldName.lastIndexOf("."));file.transferTo(newFile(folder,newName));Stringurl=req.getScheme()+"://"+req.getServerName()+":"+req.getServerPort()+"/upload"+format+newName;System.out.println(url);returnRespBean.ok("上传成功！");}这里的文件上传比较简单，上传的文件按照日期分类，UUID用于重命名文件。这里为了简化代码，我省略了异常捕获，上传结果直接返回成功。大家可以根据自己的实际情况修改后台代码。Ajax上传在Vue中，文件上传是通过Ajax实现的。该方案与传统Ajax实现文件上传的方案基本相同。唯一的区别是查找元素的方式。导入数据这里先提供一个导入input组件的文件，再提供一个导入按钮，在导入按钮的事件中完成导入逻辑。importData(){letmyfile=this.$refs.myfile;letfiles=myfile.files;letfile=files[0];varformData=newFormData();formData.append("file",file);this.uploadFileRequest("/system/basic/jl/import",formData).then(resp=>{if(resp){console.log(resp);}})}这个上传的核心逻辑解释如下：首先，在$refs中使用Vue查找存放文件的元素。类型为file的input元素内部有一个files数组，里面存储了所有选中的文件。由于上传文件时可以多次选择文件，所以这里获取的files对象是一个数组。从文件对象中，获取要上传的文件。由于这是一个单一的选择，它实际上是数组中的第一项。构造一个FormData来存储上传的数据。FormData不能像Java中的StringBuffer那样使用链式配置。FromData构造完成后，就可以直接上传数据了，FormData就是要上传的数据。上传文件要注意两点，1.请求方式为post，2.设置Content-Type为multipart/form-data。这种文件上传方式其实就是传统的Ajax上传文件。不同于常见的jQuery写法。这里的元素查找方式不同（其实元素查找也可以按照JavaScript中原来的写法来实现）。其他拼写完全??相同。该方法为通用方法，与使用何种前端框架无关。最后看一下打包后的上传方法：exportconstuploadFileRequest=(url,params)=>{returnaxios({method:'post',url:`${base}${url}`,data:params,headers:{'Content-Type':'multipart/form-data'}});}经过这几步的配置，前端上传就完成了，可以上传文件了。使用Upload组件如果使用Upload，需要引入ElementUI，所以一般建议如果使用ElementUI作为UI控件，可以考虑使用Upload组件上传文件。如果不使用ElementUI，不建议使用Upload组件。至于OtherUI控件，各有自己的文件上传组件。具体使用请参考各自的文档。{{btnText}}show-file-list表示是否显示上传文件列表，默认为true，这里设置为不显示。before-upload表示上传前的回调。在这个方法中，可以做一些准备工作，比如给用户显示一个进度条。on-success和on-error分别表示上传成功和失败时的回调。您可以在这两种方法中给用户相应的提示。如果有进度条，需要在这两个方法中关闭进度条。action指的是文件上传地址。上传按钮的点击状态和图标设置为变量。文件上传过程中，修改上传按钮的点击状态为不可点击，修改图标为加载图标loading。上传的文本也被设置为一个变量。默认情况下，上传按钮的文本是DataImport。上传开始时，将按钮上的文本更改为导入。对应的回调如下：onSuccess(response,file,fileList){this.enabledUploadBtn=true;this.uploadBtnIcon='el-icon-upload2';this.btnText='dataimport';},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='Importing';}当文件开始上传时，修改上传按钮不可点击，同时修改上传按钮的图标和文字。当文件上传成功或失败时，修改上传按钮的状态为可点击，并恢复上传按钮的图标和文字。上传效果图如下：总结一下，两种上传方式各有优缺点：第一种方式最大的优点就是普适，处处可以用的trick，但是对于监控上传过程，进度条的显示等，其他逻辑都需要自己实现。第二种方式不够通用，因为它是ElementUI中的组件，必须引入ElementUI才能使用。不过这种方式显然需要更方便的回调，可以很方便的处理各种常见的上传问题。第二种方式可以满足一般的上传需求，但是如果要自定义上传方式，建议使用第一种上传方式。
