vue Excel文件上传

使用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)));
    }

效果

欢迎关注我的公众号：