el-upload点击事件不在el-upload中如何触发选文件(其他按钮触发el-upload上传)
时间: 2023-09-04 10:06:45 浏览: 79
可以使用el-upload组件提供的ref属性获取到el-upload的组件实例,在其他按钮的点击事件中通过调用实例的click()方法来触发选文件操作。例如:
```
<el-upload ref="uploadRef"></el-upload>
<el-button @click="selectFile">选择文件</el-button>
methods: {
selectFile() {
this.$refs.uploadRef.click()
}
}
```
这样点击"选择文件"按钮时,就会触发el-upload的选文件操作。
相关问题
el-对话框开启的时候触发上传el-upload事件
el-dialog组件中的el-upload组件,可以在对话框开启时触发上传el-upload事件。具体实现方式如下:
1. 在el-dialog的opened事件中获取el-upload组件实例,代码如下:
```
<template>
<div>
<el-dialog :visible.sync="dialogVisible" @opened="handleDialogOpen">
<el-upload ref="upload" action="/upload" :show-file-list="false"></el-upload>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
dialogVisible: false
}
},
methods: {
handleDialogOpen() {
const upload = this.$refs.upload
upload.$refs.input.click()
}
}
}
</script>
```
2. 在handleDialogOpen方法中,使用$refs获取到el-upload组件实例,然后调用其内部的$input元素的click方法触发上传事件。这里需要注意的是,$refs获取到的是一个Vue组件实例,因此需要通过$refs.upload.$refs.input来获取到内部的$input元素。
el-upload文件删除按钮点击事件
el-upload组件提供了多种方法来调用删除文件的操作,以触发相应的before-remove钩子、从组件的列表删除对应文件、on-remove钩子。以下是两种常用的方法:
1.使用$refs调用删除文件的操作:
```javascript
this.$refs.upload_attach.$refs['upload-inner'].onRemove(file);```
其中,upload_attach是el-upload组件的ref属性值,file是要删除的文件对象。
2.使用handleRemove方法调用删除文件的操作:
```javascript
this.$refs.upload_attach.handleRemove(file);
```
其中,upload_attach是el-upload组件的ref属性值,file是要删除的文件对象。
需要注意的是,以上两种方法都会触发before-remove钩子和on-remove钩子,并从组件的列表中删除对应的文件。