Vue3 + Element Plus 手动批量上传文件组件详解

在Web应用中，文件上传是一项常见但重要的功能。Vue3结合Element Plus框架可以轻松实现文件上传，并提供良好的用户体验。本篇文章将详细介绍如何使用Vue3和Element Plus构建一个手动触发的批量文件上传组件。

技术栈

• 前端框架: Vue3
• UI库: Element Plus

完整代码

<template>
  <div class="app-container">
    <el-upload ref="uploadRef" multiple action="" accept=".xls, .xlsx" :show-file-list="true" :auto-upload="false" :http-request="uploadFile">
      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
      <div class="tips">支持格式：.xls, .xlsx；大小不超过10MB。</div>
    </el-upload>
    <div class="operation-btn">
      <el-button size="small" type="success" @click="submitUpload">确定</el-button>
    </div>
  </div>
</template>

<script>
import { nextTick, onMounted, ref } from 'vue'
import { ElMessage } from 'element-plus'

export default {
  name: 'UploadFiles',
  setup() {
    const uploadFileList = ref([])
    const uploadRef = ref(null)

    function uploadFile({ file }) {
      const fileName = file.name
      const fileNameArray = fileName.split('.')
      let fileType = ''
      if (fileNameArray.length > 0) {
        fileType = fileNameArray[1]
      }
      const checkType = (fileType === 'xls' || fileType === 'xlsx')
      const fileSize = file.size / 1024 / 1024
      if (!checkType) {
        ElMessage.error('只允许上传.xls、.xlsx格式的文件')
        return
      }
      if (fileSize > 10) {
        ElMessage.error('上传文件大小不能超过 10MB!')
        return
      }
      uploadFileList.value.push(file)
    }

    function submitUpload() {
      // 触发上传操作
      ctx.emit('emitUploadFiles', uploadFileList.value)
      nextTick(() => {
        uploadRef.value.clearFiles()
        uploadFileList.value = []
      })
    }

    onMounted(() => {
      uploadFileList.value = []
    })

    return {
      uploadFileList,
      uploadFile,
      submitUpload,
      uploadRef
    }
  }
}
</script>

<style scoped>
.app-container :deep(.el-upload) {
  text-align: left;
}

.tips {
  color: red;
  text-align: left;
  font-size: 12px;
}

.operation-btn {
  width: 100%;
  text-align: center;
  height: 48px;
  line-height: 48px;
}
</style>

使用组件

现在，你可以在任何父组件中使用uploadFiles组件。

<upload-files @emitUploadFiles="submitUpload" />

function submitUpload(files) {
      const formData = new FormData()
      files.forEach((file) => {
        formData.append('files', file)
      })
      // 这里写你的上传逻辑或者请求接口
    }

步骤详解

1. 模板结构

• 文件选择按钮 (<el-button slot="trigger">): 用于触发文件选择对话框。
• 文件列表展示 (:show-file-list="true"): 显示已选择的文件列表。
• 文件类型限制 (accept=".xls,.xlsx"): 限制只能选择.xls和.xlsx格式的文件。
• 手动上传开关 (:auto-upload="false"): 关闭自动上传功能。
• 文件上传方法 (:http-request="uploadFile"): 自定义文件上传逻辑。

2. 文件选择逻辑

• 文件验证 (uploadFile):
  • 分割文件名获取扩展名。
  • 验证文件类型是否为.xls或.xlsx。
  • 验证文件大小是否小于10MB。
  • 如果验证失败，则显示错误消息。
  • 如果验证成功，则将文件添加到uploadFileList数组中。

3. 文件上传逻辑

• 上传按钮 (@click="submitUpload"): 触发文件上传操作。
• 提交上传 (submitUpload):
  • 通知父组件执行文件上传，并向父组件传递文件列表
  • ctx.emit('emitUploadFiles', uploadFileList.value)。
  • 清空文件列表(uploadRef.value.clearFiles()和uploadFileList.value = [])。

总结

通过以上步骤，我们实现了基于Vue3和Element Plus的手动批量文件上传组件。该组件支持批量选择.xls和.xlsx文件，并在用户确认后手动上传这些文件。你可以根据自己的需求进一步扩展此组件的功能，例如添加文件预览、上传进度条等功能。