使用elementUI upload组件上传excel文件实现二次确认上传的功能

2024-01-05 08:49:37

Vue中使用elementUI upload组件上传excel文件

安装elementUI

首先，我们需要在Vue项目中安装elementUI库。可以在项目根目录下运行以下命令：

npm install element-ui

安装完成后，在main.js文件中导入elementUI并将其作为Vue的全局组件：

import Vue from 'vue'
import ElementUI from 'element-ui'

Vue.use(ElementUI)

使用elementUI upload组件

在Vue组件中，我们可以使用<el-upload>组件来上传文件。这个组件提供了许多有用的功能，包括文件拖拽、进度条、错误提示等。

<el-upload
  action="your_upload_url"
  multiple
  accept=".xlsx"
  on-change="handleChange"
>
  <el-button>点击上传</el-button>
</el-upload>

实现二次确认上传

为了实现二次确认上传的功能，我们需要在handleChange方法中添加一些代码。在这个方法中，我们可以先检查用户选择的文件是否符合要求，然后再弹出确认对话框让用户确认是否要上传文件。

handleChange(file, fileList) {
  // 检查文件是否符合要求
  if (file.size > 2 * 1024 * 1024) {
    this.$message.error('文件大小不能超过2MB');
    return;
  }
  if (!/\.xlsx$/i.test(file.name)) {
    this.$message.error('只能上传excel文件');
    return;
  }

  // 弹出确认对话框
  this.$confirm('是否要上传文件？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 用户点击了确定按钮
    this.$refs.upload.submit();
  }).catch(() => {
    // 用户点击了取消按钮
  });
}