Vue使用Element UI 的upload做Excel文件上传，后端拿到Excel做数据导入

首先呢，我的需求是用Excel表做数据导入，前端传入文件，后端拿到文件解析，然后插入数据库，由于对vue不熟悉，踩了很多的坑，最后还是做完了，这里分享一下我踩过的坑。
直接贴代码吧：

<!--文件导入-->
    <template>
      <div>
        <el-upload
          class="filter-item"
          name="file"
          action="string"
          :on-error="uploadFalse"
          :on-success="uploadSuccess"
          :before-upload="beforeAvatarUpload"
          :limit="1"
          ref="upload"
          accept=".xlsx,.xls"
          :show-file-list="false"
          :file-list="fileList"
          :http-request="uploadFile"
        >
          <el-button  style="margin-left: 10px;" icon="el-icon-edit" type="primary" v-has-perm="">商品上架</el-button>
        </el-upload>
      </div>
    </template>

最初，我在action里直接添加了后台的API地址，但是拿不到file文件。
然后去查了很多帖子，把目光转到 :http-request="uploadFile"这个属性上面，

action给了一个string值，http-request属性覆盖默认的上传行为，可以自定义上传的实现，从param.file可以直接拿到上传的file文件，拿到文件才能去传输，upload方法：

    async uploadFile(param){
      const File = param.file;
      let formData1 = new FormData();
      formData1.append("file", File);
      await obj.ExcelInsertGoodinStore(formData1);
      this.findPage();
    },

ExcelInsertGoodinStore方法：你可以有自己的写法

ExcelInsertGoodinStore(entity){
    return axios.post(`good/ExcelInsertGoodinStore`,entity)
  }

其他的钩子函数：
上传成功，上传失败，以及上传校验

 async uploadSuccess(response, file, fileList) {
      console.log(response)
      if (response.status==20000) {
        this.$message({
          message: response.message,
          type: 'success'
        });
      } else {
        this.$message({
          message: response.message,
          type: 'error'
        });
      }
    },
    uploadFalse(response, file, fileList) {
      this.$message({
        message: '文件上传失败！',
        type: 'error'
      });
    },
    // 上传前对文件的大小的判断
    beforeAvatarUpload(file) {
      const extension = file.name.split(".")[1] === "xls";
      const extension2 = file.name.split(".")[1] === "xlsx";
      const isLt2M = file.size / 1024 / 1024 < 10;
      if (!extension && !extension2) {
        this.$message({
          message: '上传模板只能是 xls、xlsx格式!',
          type: 'error'
        });
      }
      if (!isLt2M) {
        console.log("上传模板大小不能超过 10MB!");
        this.$message({
          message: '上传模板大小不能超过 10MB!',
          type: 'error'
        });
      }
      return extension || extension2 || extension3 || (extension4 && isLt2M);
    },

后台代码：
很多帖子里会说name方法要与后台接收的参数一致，我一直都写一致的，所以也没发现报错,name=“file” 和后台接收写一致就好了，接收我是用MultipartFile 直接接收，怎么解析（这里就不写了），解析也有很多帖子

 /**
     * 商品批量导入功能
     */
    @RequestMapping(value = "/ExcelInsertGoodinStore", method = RequestMethod.POST)
    @ResponseBody
    public AxiosResult importGood(@RequestParam("file") MultipartFile file) {
        BaseGoodService.GoodImport(file);
        return AxiosResult.success(AxiosStatus.OK);
    }

这样基本上就可以了，至于你要保存文件到什么地方，还是做文件解析，根据需求来吧。