element的上传文件打不开？

Question

如下代码，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();
}

Answer 1

 <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()
}

Answer 2

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

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

Answer 3

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

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

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