通过@click.stop阻止冒泡事件
<el-upload ref="upload1" :http-request="handleUpdate" action="">
<el-button
style="width: 100%; margin-top: 20px"
type="primary"
icon="el-icon-upload"
@click.stop="dialogVisible = true"
>人脸特征照片</el-button
>
</el-upload>
<el-dialog title="提示" :visible.sync="dialogVisible" width="450px" append-to-body>
<img src="../../../assets/images/photo-hint.png" style="width: 410px; height: 500px" />
<div align="center">
<el-button type="primary" @click="handleOpenUpdate">我知道了</el-button>
</div>
</el-dialog>
通过ref触发事件,弹出文件选择框
// 触发upload组件内部点击事件,弹出文件选择框
handleOpenUpdate() {
this.dialogVisible = false;
this.$refs.upload1.$refs["upload-inner"].handleClick();
},
handleUpdate就是文件上传的方法,uploadFiles是封装过的request文件上传方法
handleUpdate(item) {
let formData = new FormData();
formData.append("file", item.file);
uploadFiles(formData).then((response) => {
this.userFrom.url[2] = response.fileName;
this.$message.success("上传成功");
});
},