使用element组件el-upload

  <el-upload
         ref="upload"action="doUpload"
         :limit="1"
         :file-list="fileList"
         :before-upload="beforeUpload">
<el-button type="primary" style="width: 150px" @click="uploadFile">上传文件</el-button>
        <div slot="tip" class="el-upload__tip"></div>
  </el-upload>

文件判断

      beforeUpload(file){
        console.log(file,'文件');
        this.files = file;
        const extension = file.name.split('.')[1] === 'xls'
        const extension2 = file.name.split('.')[1] === 'xlsx'
        const isLt2M = file.size / 1024 / 1024 < 20
        if (!extension && !extension2) {
          this.$message.warning('上传模板只能是 xls、xlsx格式!')
          return
        }
        if (!isLt2M) {
          this.$message.warning('上传模板大小不能超过 20MB!')
          return
        }
        this.fileName = file.name;
        return false // 返回false不会自动上传
      },

上传到后端

 submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {

            console.log('上传'+this.files.name)
            if(this.fileName == ""){
              this.$message.warning('请选择要上传的文件！')
              return false
            }
            let fileFormData = new FormData();
            fileFormData.append('file', this.files, this.fileName);//filename是键，file是值，就是要传的文件，test.zip是要传的文件名
            let requestConfig = {
              headers: {
                'Content-Type': 'multipart/form-data'
              },
            }


            impExcel(fileFormData, requestConfig).then((res) => {
              console.log("上传excel文件")
            })
            //关闭弹窗
            this.dialogVisible = false;
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },

引入js方达

export function impExcel(data) {
  return request({
    url: '/api/upExcel',
    method: 'post',
    data: data
  })
}

后端

 @PostMapping(value = "/upExcel")
    public void readExcel(@RequestParam(value="file", required = false)  MultipartFile file){
        long t1 = System.currentTimeMillis();
        List<ArcBasicExcel> list = ExcelUtils.readExcel("", ArcBasicExcel.class, file);
        long t2 = System.currentTimeMillis();
        System.out.println(String.format("read over! cost:%sms", (t2 - t1)));
    }

效果

欢迎关注我的公众号：

业务需求：

批量导入Excel文件

实现方式：

使用组件upload

具体步骤：

1、引入组件：

		<el-upload
              accept=".xlsx, .xls"  //文件类型
              :file-list="fileList"   //存储文件的数组
              :action="actionUrl"  //请求的url
              :before-upload="beforeUploadFile" //文件上传之前的钩子
              :on-exceed="exceedFile"  //文件超出个数时的钩子
              :on-success="uploadSuccess" //文件上传成功时的钩子
              :show-file-list="isShowFile"  //是否显示文件上传列表
              multiple  //支持多文件上传
              :limit="limitNum"  //文件上传个数限制
            >
             <el-button type="primary" style="margin-left:0px">导入Excel</el-button>
       </el-upload>

2、data中定义：

	  fileList: [],    //excel 文件列表
      limitNum: 3,   //选择文件个数
      actionUrl: "/api/teach/importCourse", //上传文件url
      isShowFile: false //文件列表是否显示 默认不显示

3、methods中方法：

//文件上传之前的钩子
    beforeUploadFile(file) {
      console.log("before upload");
      console.log(file.size);
      var FileExt = file.name.replace(/.+\./, "");
      if (["xls", "xlsx"].indexOf(FileExt.toLowerCase()) === -1) {
        this.$message({
          type: "warning",
          message: "请上传后缀名为xls、xlsx的附件！"
        });
        return false;
      }
      //file.size 以字节为单位
      this.isLt2k = file.size / 2048 < 100 ? "1" : "0";
      if (this.isLt2k === "0") {
        this.$message({
          message: "上传文件大小不能超过100k!",
          type: "error"
        });
      }
      return this.isLt2k === "1" ? true : false;
    },
    //文件超出个数时的钩子
    exceedFile(files, fileList) {
      console.log("文件超出个数：", files);
      this.$message.warning(
        `只能选择 ${this.limitNum} 个文件，当前共选择了 ${files.length +
          fileList.length} 个`
      );
    },

//文件上传成功时的钩子
    uploadSuccess(response, file, fileList) {
      console.log("上传文件", response.data);
      console.log("返回状态", response.code);
      console.log(fileList);
      if (response.code != "0000") {
        this.excelData = response.data;
        this.exportErrorFile();
        return this.$message.error("导入失败！");
      } else {
        this.isShowFile = true;
        return this.$message.success("导入成功！");
      }
    },

首先呢，我的需求是用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);
    }

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