el-upload组件在弹出文件选择窗口前执行操作

原创于 2025-07-30 18:23:47 发布 · 224 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#前端 #javascript #java

收录于

关键点：ref="fileUploadRef"、@click.stop="beforeUpload"
fileUploadRef.value.$el.querySelector('input[type="file"]').click();

<el-form-item label="文件上传" prop="fileId">
  <el-upload
    ref="fileUploadRef"
    action="/sysFile/upload"
    :limit="1"
    :accept="form.fileType === 1 ? '.jpg, .jpeg, .png' : '.doc, .docx, .pdf, .xls, .xlsx'"
    :on-success="handleSuccess"
    :on-remove="handleRemove"
    :file-list="fileList"
    class="custom-upload"
  >
    <div class="el-upload-dragger w-full" @click.stop="beforeUpload">
      <el-icon class="el-icon--upload"><upload-filled /></el-icon>
      <div class="el-upload__text">
        <em>点击上传</em>
        <div class="tip">
          支持上传{{ form.fileType === 1 ? '.jpg, .jpeg, .png' : '.doc, .docx, .pdf, .xls, .xlsx' }}格式</div>
      </div>
    </div>
  </el-upload>
</el-form-item>

const fileUploadRef = ref(null);
const beforeUpload = () => {
  ElMessageBox.confirm('严禁通过本平台传输、处理涉密信息', '信息确认', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    fileUploadRef.value.$el.querySelector('input[type="file"]').click();
  });
};