uppy教程：轻松上手的文件上传工具使用指南

uppy 是一个功能强大且易于使用的 JavaScript 文件上传库。在 web 应用中，文件上传常常是用户界面中的关键部分。uppy 提供了一个简洁的 API 和直观的用户界面（UI），使得文件上传功能的实现变得更加高效和可靠。使用uppy，你可以轻松地为你的网站或 web 应用添加文件上传功能，不再需要从头构建复杂的上传流程。

uppy 支持多种上传模式，包括使用拖放进行文件选择、通过点击按钮加载文件、直接从 URL 上传文件等多种方式。其强大的 API 允许开发者自定义上传行为，包括上传限制、错误处理、进度显示等，满足不同应用场景的需求。

在本地环境安装uppy

首先，你需要安装 Node.js 和 npm（Node.js 的包管理器）。然后，使用以下命令安装uppy：

npm install uppy

如果你使用的是 yarn，可以使用以下命令：

yarn add uppy

这会在你的项目中创建一个名为 node_modules 的文件夹，并将uppy相关的依赖文件放入其中。

在服务器上安装uppy

uppy 直接在浏览器环境中运行，无需在服务器上安装。上述在本地环境的安装步骤适用于服务器上，无需额外操作。

创建uppy实例

首先，在你的 HTML 文件中引入uppy 的 CSS 和 JS 文件：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@uppy/core@latest/dist/CdnUpload.min.css">
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/@uppy/core"></script>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/@uppy/upload-diagnostic"></script>

然后，创建一个uppy 实例：

<div id="your-container"></div>
<script>
  const container = document.getElementById('your-container');
  const uppy = Uppy.Core(container)
    .use(Uppy.DragDrop, { target: '#your-container' })
    .use(Uppy.ProgressIndicator, { target: '#progress-bar' });
</script>

选择文件

uppy 提供多种选择文件的方式。在这里，我们用拖放方式选择文件：

<div id="your-container"></div>
<div id="progress-bar"></div>

上传文件

在创建uppy实例时，可以通过调用 uppy.upload() 方法开始上传文件：

uppy.on('fileadded', (file) => {
  console.log(`File added: ${file.name}`);
});

uppy.on('uploadstart', (file) => {
  console.log(`File ${file.name} is being uploaded.`);
});

uppy.on('uploadprogress', (file, progress) => {
  console.log(`File ${file.name} is at ${progress}% progress.`);
});

uppy.on('uploadsuccess', (file, response) => {
  console.log(`File ${file.name} was successfully uploaded.`);
});

uppy.on('uploaderror', (file, error) => {
  console.log(`Error uploading file ${file.name}: ${error}`);
});

uppy.upload();

uppy 提供了丰富的配置选项，允许你定制上传行为以适应特定需求。例如，你可以设置文件上传的最大限制、上传失败后的重试策略、自定义错误提示等。

示例：设置上传限制

uppy.set('maxFileSize', 5 * 1024 * 1024); // 设置最大文件大小为5MB
uppy.set('maxNumberOfFiles', 3); // 设置最多上传文件数量为3

示例：定制错误提示

uppy.config.onError = (error) => {
  console.error(`Error occurred: ${error}`);
  // 这里可以自定义错误提示或者用户操作
};

断点续传

uppy 支持自动断点续传，当上传过程中发生中断（如网络问题）时，继续从中断的位置上传文件，而不是重新开始上传。

多线程上传

uppy 提供多线程上传功能，可以并行处理多个文件上传，提高上传效率。

进度展示

uppy 可以实时显示上传进度，帮助用户了解文件上传状态。

集成外部服务

uppy 支持集成多种外部文件存储服务，如阿里云 OSS、腾讯云 COS、AWS S3 等。

Q: 如何处理上传失败的情况？

A: 可以通过设置 onError 事件处理器来自定义错误处理逻辑。例如：

uppy.config.onError = (error) => {
  console.error(`Error occurred: ${error}`);
  // 提示用户错误信息或重试机制
};

Q: 如何在上传过程中保持文件选择的灵活性？

A: 使用 onFileSelect 和 onFileRemove 事件处理器来控制文件的添加和移除行为：

uppy.on('fileSelected', (file) => {
  console.log(`File ${file.name} selected.`);
});

uppy.on('fileRemoved', (file) => {
  console.log(`File ${file.name} removed.`);
});

通过以上内容，你应该能够轻松上手uppy，并根据你的项目需求灵活配置文件上传功能。uppy 简洁的 API 和丰富的功能使其成为构建文件上传功能的理想选择。