VUE3 构建自定义上传组件：实时掌控文件上传进度

## 前言

在现代 Web 开发中，文件上传功能必不可少。VUE3 作为一款优秀的框架，提供了丰富的 API，让我们能够轻松创建功能强大的上传组件。本文将深入探讨如何使用 VUE3 构建一个自定义上传组件，它不仅支持多文件上传，还能实时显示上传进度。

## 构建自定义上传组件

**1. 搭建组件框架** 

首先，我们需要创建一个新的 VUE3 组件，我们将命名为 "FileUpload"。在组件的模板中，我们将使用`<input type="file">`元素来选择文件，并绑定一个名为 "selectedFiles" 的数据属性来存储已选择的文件。

**2. 处理文件选择** 

当用户选择文件时，我们需要监听 "change" 事件并更新 "selectedFiles" 数据属性。同时，我们可以使用 `FormData` 对象创建一个新的表单数据，其中包含要上传的文件。

**3. 发起上传请求** 

接下来，我们需要发起一个 POST 请求来上传文件。我们可以使用 `fetch()` API，并设置 `body` 为我们的表单数据。同时，我们可以通过监听 `progress` 事件来跟踪上传进度。

**4. 实时更新进度条** 

在上传过程中，我们可以通过监听 `progress` 事件来获取上传的字节数和总字节数。使用这些信息，我们可以计算出上传进度并更新组件中的进度条。

## 实战应用

**1. 安装依赖项** 

为了使用 `FormData` 和 `fetch`，我们需要安装以下依赖项：

npm install form-data fetch

**2. 组件代码** 

**3. 使用组件** 

现在，我们可以将自定义的 "FileUpload" 组件添加到我们的应用程序中：

## 总结

通过本文，我们了解了如何使用 VUE3 构建一个自定义上传组件。该组件不仅支持多文件上传，还能实时显示上传进度。希望这篇文章能够帮助您构建更强大、更用户友好的 Web 应用程序。