一、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博客icon-default.png?t=N7T8https://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>

Logo

前往低代码交流专区

更多推荐