Vue 3 + Element Plus 实现文件上传组件：详细解析与实现指南

Vue 3 文件上传组件实现详解

在实际的前端开发中，文件上传是一个常见的需求，尤其是在需要处理文档、图片或其他类型文件的应用中。Vue 3 结合 Element Plus UI 组件库为我们提供了一个简单且灵活的文件上传解决方案。在这篇文章中，我们将详细介绍一个文件上传组件的实现过程，并解释每一部分的逻辑和功能。

项目背景

假设我们正在开发一个表单功能，用户可以在表单中上传附件。这个附件可以是多种格式（如 doc, pdf, jpg 等），同时我们希望对上传的文件数量和大小进行限制。为了提高用户体验，我们还需要实现文件的删除功能和实时的上传提示信息。

需求分析

• 文件类型和大小限制：允许用户上传特定类型和大小的文件。
• 上传进度管理：能够在上传过程中显示状态信息。
• 文件删除功能：支持上传文件的删除。
• 实时提示：上传前后提供相应的提示信息（如格式不正确、大小超限等）。

组件实现

我们利用 el-upload 组件来实现文件上传功能。el-upload 是 Element Plus 提供的一个文件上传组件，它集成了文件上传、进度条、错误处理等常见功能。

1. 模板部分（<template>）

<template>
  <div class="upload-file">
    <el-upload
      multiple  <!-- 支持多文件上传 -->
      :action="uploadFileUrl"  <!-- 上传请求的地址 -->
      :before-upload="handleBeforeUpload"  <!-- 上传前的文件校验 -->
      :file-list="fileList"  <!-- 当前上传的文件列表 -->
      :limit="limit"  <!-- 上传文件数量限制 -->
      :on-error="handleUploadError"  <!-- 上传失败的回调 -->
      :on-exceed="handleExceed"  <!-- 超出文件数量限制的回调 -->
      :on-success="handleUploadSuccess"  <!-- 上传成功的回调 -->
      :show-file-list="false"  <!-- 不显示默认的文件列表 -->
      :headers="headers"  <!-- 上传请求的头部 -->
      class="upload-file-uploader"
      ref="fileUpload"
    >
      <!