vue2+elementUI / vue3+elemengUI Plus el-upload点击事件不在el-upload中如何触发选文件(其他按钮触发el-upload上传)
el-upload点击事件不在el-upload中如何触发选文件(其他按钮触发el-upload上传)
·
一、vue2 + elementUI
template:
<el-button
size="mini"
@click="handleReport"
type="primary"
:loading="loading"
>
上传
</el-button>
<div class="upload-box" style="display:none">
<el-upload
ref="upload"
class="upload-demo"
:action="actionUrl"
:headers="{ 'x-auth-token': token }"
:limit="1"
accept=".xls, .xlsx"
:on-success="successHandle"
v-loading="downLoading"
:before-upload="startUpload"
:show-file-list="false"
:file-list="fileList"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">请点击上传文件</div>
</el-upload>
</div>
methods:
// 点击导入
handleReport() {
this.$refs["upload"].$refs["upload-inner"].handleClick()
},
二、vue3 + elementUI Plus
感谢大佬提供了方法:菠萝啊菠萝蜜_JS,HTML、CSS,Vue-CSDN博客https://blog.csdn.net/yuy20151225
template:
<el-button type="primary" size="default" @click="handleUpload">上传</el-button>
<div class="upload-box" style="display: none">
<el-upload ref="uploadRef" class="upload-demo" action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" :limit="1" :auto-upload="false" :file-list="fileList">
</el-upload>
</div>
script
<script lang="ts" setup>
import type { UploadInstance } from 'element-plus';
import { ref } from 'vue';
const fileList = ref([]);
const uploadRef = ref<UploadInstance>();
const handleUpload = () => {
uploadRef.value.$el.querySelector('input').click();
};
</script>
更多推荐
已为社区贡献4条内容
所有评论(0)