vue+element Upload 上传前添加判断_vue a-upload导入时提前判断id是否存在-优快云博客

本文链接：https://blog.youkuaiyun.com/TortyE/article/details/134636745

文章介绍了如何在Vue项目中使用ElementUI的el-upload组件进行文件上传，包括添加点击按钮的判断逻辑、设置上传前的限制和处理上传成功与失败的回调函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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