vue項目中使用element插件中的upload上傳文件的踩坑記錄

 

 一、項目需求在上傳狀態中原插件點擊直接上傳到服務器 本項目中的需求是 點擊上傳到本地 點擊確定按鈕之后進行網絡請求上傳到服務器上

二、解決辦法

（1）標簽

 <span>上傳文件：</span>
        <el-upload
          ref="uploadFile"
          class="upload-demo"
          :action="actionUrl"
          :on-change="handleChange"
          :file-list="fileList"
          :show-file-list="true"
          :before-upload="beforeUpload"
          :on-success="successUpdate"
          :auto-upload="false"
          
        >
          <el-button size="small" icon="el-icon-upload2">點擊上傳</el-button>
        </el-upload>

 

（2）js行為

(1)本地上傳

beforeUpload(file) {
      console.log(file);

      let fileName = file.name;
      // let uid = file.uid
      let pos = fileName.lastIndexOf(".");
      let lastName = fileName.substring(pos, fileName.length);
      console.log(lastName, lastName.toLowerCase());
      if (
        lastName.toLowerCase() !== ".xls" &&
        lastName.toLowerCase() !== ".xlsx"
      ) {
        this.$message.error("文件必須為 .xls .xlsx類型");

        return false;
      }
      return false;
    },

（2）點擊網絡請求上傳服務器

transferToManager() {
      console.log('post',this.$refs.uploadFile.$children[0])
      this.$refs.uploadFile.$children[0].post(
        this.$refs.uploadFile.fileList[0].raw
      )
      this.managerStatus = false; 
    },

（3）捕獲請求結果

 successUpdate(response) {
      console.log('successUpdate',response);
      if (response.code == 200) {
        this.$message(response.msg);
      }else{
         this.$message.warning(response.msg);
      }
      this.getAmountList()
    },

三、原因分析

為什么不能直接調用submit呢？因為在befroeupload函數調用時若狀態改為false，則會導致submit失效