轻松掌握 Element-UI Upload 的 JavaScript 上传技巧

2024-02-11 04:36:00

前言

Element-UI 是一个基于 Vue.js 的开源前端组件库，它提供了丰富的 UI 组件，可以帮助我们快速搭建高质量的前端界面。Element-UI 的 Upload 组件是一个功能强大的文件上传组件，它提供了多种上传方式和丰富的自定义选项，可以满足各种业务场景的需求。

通过 JavaScript 触发上传操作

Element-UI Upload 组件提供了一个名为 trigger 的 prop，我们可以通过它来指定触发上传操作的方式。默认情况下，trigger 的值为 click，这意味着当用户点击上传按钮时，会打开文件选择框。但是，我们可以通过将 trigger 的值设置为 js，来让上传操作由 JavaScript 代码触发。

<el-upload :trigger="js">
  <i class="el-icon-upload"></i>
  <span>点击上传</span>
</el-upload>

const upload = document.querySelector('.el-upload');
upload.addEventListener('click', () => {
  // 打开文件选择框
  upload.querySelector('input[type=file]').click();
});

通过条件判断来决定是否打开文件选择框

在某些情况下，我们可能需要在满足某些条件时才打开文件选择框。例如，我们可能需要检查用户是否已经登录，或者是否具有上传文件的权限。我们可以通过在 JavaScript 代码中添加条件判断来实现这一需求。

const upload = document.querySelector('.el-upload');
upload.addEventListener('click', () => {
  // 检查用户是否已经登录
  if (isLogin) {
    // 打开文件选择框
    upload.querySelector('input[type=file]').click();
  } else {
    // 提示用户登录
    alert('请先登录！');
  }
});