<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.refs.importbtn.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() //很重要
}
}
本文介绍如何使用Element UI中的el-upload组件实现自定义文件上传流程。通过隐藏默认的上传按钮并利用额外的按钮触发文件选择,实现了文件上传前的验证和预处理。此方法适用于需要增强文件上传功能的应用场景。
2488

被折叠的 条评论
为什么被折叠?



