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();
      });
    },

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM