element的上传文件打不开?

如下代码,element的upload单独在一个组件,点击外部的重新导入按钮想再次打开上传文件选择框,有其他办法吗,用openBtn里面的办法打不开

<template>

<!-- 导入弹窗 -->

<el-dialog width="400px" center="true" v-model="showDialog" v-if="showDialog" :title="importTitle" @close="closeDialog">

<div style="margin-top: 20px;margin-left: 20px;" >

<div v-if="dialogContent != ''">{{dialogContent}}</div>

</div>

<div class="import-storage-dialog-view">

<el-upload class="upload-view"

:auto-upload="false" ref="upload"

:data="upData"

:action="importURL"

:headers="importHeaders" limit="1" :accept="fileType"

:file-list="fileList"

:on-remove="onRemove"

:on-success="onUploadSuccess"

:before-upload="onBeforeUpload"

:on-error="onError"

:on-exceed="onExceed"

:on-change="onChange">

<template #trigger>

<div style="display: flex;" :style="templateUrl == '' ? 'margin-left:60px': ''">

<span class="red-star">*</span>

<el-button class="up-button" :icon="Upload" ref="">点击上传</el-button>

</div>

</template>

<el-button v-if="templateUrl != ''" class="down-button" :icon="Download" @click="downloadButtonClick()">下载模板</el-button>

<template #tip>

<div class="el-upload__tip"></div>

</template>

</el-upload>

</div>

<template #footer>

<div class="button-view">

<el-button style="

background: #ffffff;

border-radius: 4px;

border: 1px solid #ff9820;

color: #ff9820;

" @click="openBtn()">重新导入

</el-button>

<el-button style="border-color: #ff9820; background: #ff9820; color: white" @click="confirmImportClick()">完成

</el-button>

</div>

</template>

</el-dialog>

</template>

 openBtn() {

this.$refs["upload"].$refs["upload-inner"].handleClick();

}


回答:

 <el-upload class="upload-view"

:auto-upload="false" ref="upload"

:data="upData"

:action="importURL"

:headers="importHeaders" limit="1" :accept="fileType"

:file-list="fileList"

:on-remove="onRemove"

:on-success="onUploadSuccess"

:before-upload="onBeforeUpload"

:on-error="onError"

:on-exceed="onExceed"

:on-change="onChange">

<template #trigger>

<div id="triggerDiv" style="display: flex;" :style="templateUrl == '' ? 'margin-left:60px': ''">

<span class="red-star">*</span>

<el-button class="up-button" :icon="Upload" ref="">点击上传</el-button>

</div>

</template>

<el-button v-if="templateUrl != ''" class="down-button" :icon="Download" @click="downloadButtonClick()">下载模板</el-button>

<template #tip>

<div class="el-upload__tip"></div>

</template>

</el-upload>

trigger 那块定义一个id,直接触发click事件就行了

openBtn() {

document.getElementById('triggerDiv').click()

}


回答:

首先是 upload-inner 这个没看见是在哪定义的,其次可以在 trigger 的内容添加 js 点击,目的就是通过模拟手动点击触发上传。

本文参与了SegmentFault 思否面试闯关挑战赛,欢迎正在阅读的你也加入。


回答:

为了兼容性的话, 可以改成 label 标签的 for。

js 模拟的话,在某些极端情况是唤不起来的

本文参与了SegmentFault 思否面试闯关挑战赛,欢迎正在阅读的你也加入。

以上是 element的上传文件打不开? 的全部内容, 来源链接: utcz.com/p/933912.html

回到顶部