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