element-ui之upload的使用，vue 导入功能

废话不多说，直接上代码，首先我们使用的是el-upload标签，需要把导入按钮放在这个标签里。

<el-upload
     action
     :on-change="fileChange"
     accept=".xls"
     multiple
     :show-file-list="false"
     :limit="1"
     :on-exceed="handleExceed"
     :file-list="fileList"
     :before-upload="beforeUploadFile"
     :http-request="importHandle">
   <el-button type="primary">导入</el-button>
</el-upload>

在这里着重说一下action属性,无需定义，之前在网站上看的demo基本都是定义了action,但会出现404错误的问题。在这里我们直接不定义了，而是把方法放在http-request 属性里。

on-change是发生改变时触发，方法如下：

//这一步会把上传的文件封装到fileList
fileChange(file, fileList) {
  this.fileList.push(file.raw) ;
}

accept 是上传文件类型，值是string类型，这里控制只上传后缀是.xls的excel文件
show-file-list 是boolean类型的，false表示不显示上传的文件列表
limit 属性是控制一次上传文件的最大数，这里我们设置为1
on-exceed 是对limit属性的校验，在这里直接提示只能上传*个文件，方法如下：

handleExceed(files, fileList) {
  this.$message.warning(`当前限制选择 1 个文件`);
}

file-list 是上传的文件数据，
需要在data中定义：

export default {
    data() {
      return {
        fileList:[]
      }
   }
},

before-upload 是上传之前要校验的方法
这个可以根据业务需求自定义

然后就是要跟后台进行交互的方法，如下：

importHandle(item) {
   const form = new FormData();
   const fileObj = item.file;
   console.log(fileObj);
   form.append('file', fileObj);
   this.$http({
     url: this.$http.adornUrl('后台方法url'),
     method: 'post',
     headers: {
       'Content-Type': 'multipart/form-data'
     },
     data: form
   }).then(({data}) => {
     	//成功或失败的提示
   });
 }

到这里就可以完成文件的上传了，后台接收参数为MultipartFile 类型
写法如下：

@PostMapping("/import")
public R importProcessData(@RequestParam("file") MultipartFile file) {
    return parseSuccess ? R.ok() : R.error("更新数据失败，请稍后重试");
}