vue 上传组件 选择文件之前有校验 ，校验通过弹出文件选择框，否则不弹

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了vue 上传组件 选择文件之前有校验 ，校验通过弹出文件选择框，否则不弹，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1283字，纯文字阅读大概需要2分钟。

内容图文

<el-upload
        ref="upload"
        :on-remove="handleRemove"
        :http-request="handlePreview"
        :before-remove="beforeRemove"
        :limit="1"
        :file-list="fileListUpload"
        :auto-upload="false"
        :on-success="uploadSuccess"
        :on-error="uplodError"
        class="upload-insurant"
        action=""
      >
        <el-button
          v-show="show"
          ref="importbtn"
          slot="trigger"
          size="small"
          type="primary"
        >选取文件</el-button>

        <el-button
          style="margin-left: 10px;"
          size="small"
          type="primary"
          @click="beforeAvatarUpload()"
          :disabled="isDisabled"
        >选取文件</el-button>

        <el-button
          :disabled="isDisabled"
          style="margin-left: 10px;"
          size="small"
          type="primary"
          @click="submitUpload"
        >
          上传
        </el-button>
      </el-upload>

el-upload 中第一个按钮默认为上传按钮（就是点击后可以弹出文件框）
首先：
1、 首先定义一个隐藏的按钮，该按钮为上传按钮，（第一个）
2、 在定义一个普通按钮 第二个按钮 和第一个可以一样，（第二个）
然后：
隐藏按钮 要添加 ref=“importbtn” （第一个）
第二个按钮要写一个点击事件 @click=“beforeAvatarUpload()”。（第二个）

原理就是通过点击第二个按钮来添加判断、校验等一系列操作，通过后 this. r e f s . i m p o r t b t n . refs.importbtn. refs.importbtn.el.click()
触发隐藏按钮点击事件（第一个按钮）

beforeAvatarUpload() {
if (!this.multipleSelection1.length) {
return this.KaTeX parse error: Expected 'EOF', got '}' at position 81: …ext: '确定' }) }? else { this.refs.importbtn.$el.click() //很重要
}
}

内容总结

以上是互联网集市为您收集整理的vue 上传组件 选择文件之前有校验 ，校验通过弹出文件选择框，否则不弹全部内容，希望文章能够帮你解决vue 上传组件 选择文件之前有校验 ，校验通过弹出文件选择框，否则不弹所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---