Vue+element-ui Upload 的http-request自定义上传文件

 <el-upload
              ref="upload"
              :action="''"
              :on-change="changeResult"
              :http-request="requestUpload"
              :before-upload="beforeExcelUpload"
              :show-file-list="false"
              :multiple="false"
            >
              <el-button size="small" type="primary"> 导入分润表</el-button>
            </el-upload>

  

     // 上传文件
    changeResult(file, fileList) {
      this.form.file = file;
    },
    // 上传文件之前的钩子,上传前对文件的类型进行判断
    beforeExcelUpload(file) {
      const isExcel =
        file.name.split('.')[1] === 'xlsx' || file.name.split('.')[1] === 'xls';
      const isSize = file.size / 1024 / 1024 < 1;
      if (!isExcel) {
        this.$message({
          message: '只能上传xls或xlsx文件!',
          type: 'error',
        });
      }
      return isExcel;
    },
    //  覆盖默认上传行为
    requestUpload(params) {
      let fd = new FormData();
      fd.append('file', params.file);
      fd.append('FileName', params.file.name);
      fd.append('async', true);
      procQuery(this, {
        api: this.$api.financeProfitRecord,
        params: fd,
      }).then((res) => {
        //成功
        this.getList();
      });
    },

  

posted @ 2020-08-20 18:18  假装学习  阅读(2821)  评论(0编辑  收藏  举报