vue+element Upload 上传前添加判断

TortyE

于 2023-11-27 08:38:28 发布

阅读量310

点赞数

分类专栏： Element UI 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/tortye/article/details/134636745

版权

Element UI 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.添加按钮，在按钮click中添加判断条件，然后调用upload的上传方法

<el-button  type="primary"  @click="importExcel">
            勾选导入
</el-button>
<el-upload
         :class = "{disabled:isMax}"
          v-show="upLoadshow"
          name="file"
          class="filter-item"
          :show-file-list="false"
          :action="url.UploadFile"
          :on-error="uploadError"
          :on-success="uploadSuccess"
          :file-list="false"
          :headers="ausorToken"
        >
          <el-button   ref="upLoad" v-show="upLoadshow" id="shangchuang">
            勾选导入
          </el-button>
</el-upload>

：class 动态设置不显示

v-show =uploadshow 设置为false

data中

       isMax :false,
        //获取token
      ausorToken: {
        authorization: 'Bearer ' + this.$store.getters.token,
      },
      upLoadshow:false,

methods方法中

//上传之前判断
    importExcel() {
       if (this.$refs.basictable.checkBox2.length != 1) {
        return this.$message.error('请选择一条子表信息')
      } else {
        var id = this.$refs.basictable.checkBox2[0].id
        this.url.UploadFile=window.localStorage.getItem('baseURL')+'/ManufactureOrder/Import/'+id
        this.$refs.upLoad.$el.click();
       }
    },
//上传之前
    beforeUpload(file) {
      if (file) {
        this.isMax=true
        this.$refs.basictable.baseloading = true
      }
      return
    },
    //上传文件成功
    uploadSuccess(response, file, fileList) {
      this.$refs.basictable.baseloading = false
      if (response.succeeded) {
        this.$message.success(`${file.name} 文件导入成功`)
        // this.$refs.basictable.loadData()
      } else {
        this.$message.error(response.errors)
      }
     
      this.$refs.upload.clearFiles()
      setTimeout(() => {
        this.$refs.basictable.loadData()
      })
       this.$forceUpdate();
      // location.reload()
      
      
    },
    //上传文件失败
    uploadError(err, file, fileList) {
      this.$refs.basictable.baseloading = false
      this.$message.error('文件上传失败')
      this.$refs.upload.clearFiles()
    },