by-uploader

目录

• 1. 为什么要造个轮子
• 2. 简介
• 3. 安装方式
  • 3.1. 方式1：通过 npm 安装
  • 3.2. 方式3：通过<script>标签引入
• 4. 教程
• 5. API接口文档
• 6. 设计与内部机制
• 7. 开发计划

---

1. 为什么要造个轮子

为了实现大量文件上传功能，找了不少第三方文件上传工具库，其中包含了一些某度等知名的项目，等等，但都不能满足需要，他们大多都有以下一个或多个问题：

• 不能任意定义文件的分块策略、秒传、http请求格式 等功能，这使得公司的后台业务逻辑必须要适应文件上传工具库
• 绑定的有 UI 界面，而这些界面大多与公司的项目风格不同。
• 没有有任务管理功能：不能控制并发的，导致请求过多，阻塞其它业务请求。
• 需要与特定的后端工具配合使用：有些文件上传工具 带有 后端对应的工具 或 项目，需要同时使用 上传工具 和后端的处理工具，这使得前端 与 后端的耦合性太强。

而我认为理想的文件上传工具，应具备以下特点：

• 支持文件分块、秒传、断点续传 等功能。
• 与后端逻辑解耦合，可适应于任何文件上传策略、分块策略、Http请求任意自定义 等等
• 有丰富的事件，能提供上传界面可能需要的所有任务信息
• 不包含上传的UI界面，只是纯粹的上传工具库，就像 http请求库 axios、umi-request 一样，纯粹地做文件上传逻辑请求和管理层面的功能，不包含界面。
• 能控制并发的任务数量，防止上传请求过多，导致阻塞其它业务请求。
• 支持任务优先级：可以指定文件的优先级，上传时可以根据文件的优先级来决定上传的次序。

所以，by-uploader 就诞生了。

2. 简介

by-uploader 是一个可用于多文件上传场景、与后端实现无关的，并 带有任务管理、优先级、文件分块、秒传、断点续传等功能的，不含界面 纯粹的 文件上传 工具库。

具有以下特性：

• 文件分块：可设置块的大小，自定义分块策略，将每个文件分成多个块，同时进行上传，以提高上传速度。
• 文件预检：支持上传之前向后台检查文件 或 分块 是否已存在，如果存在，则可跳过上传。
• 秒传：对于之前上传过的文件跳过上传，直接成功。
• 断点续传：其实是 文件分块 和 秒传的应用。
• 与后端解耦合：因为 by-uploader 在 分块策略、预检、上传请求格式 等方面拥有十分优秀的设计、充分的自定义、扩展机制，所以 by-uploader 能在各种文件上传场景下应用，可以与各种后端业务逻辑结合。详情请看 经典方案示例。
• 任务并发量控制：可控制上传请求的并发量，用以防止上传请求过多，导致阻塞其它业务请求。
• 支持任务优先级：可以指定文件的优先级，上传时可以根据文件的优先级来决定上传的次序。
• 不包含上传的UI界面：by-uploader 只是纯粹的上传工具库，就像 http请求库 axios、umi-request 一样，纯粹地做文件上传逻辑请求和管理层面的功能，不包含界面。
• 详细的事件：在整个文件上传过程中，无论是 分块级、文件级、by-uploader级，每个环节都会有对应的事件抛出，并携带相关信息，能满足各种 上传界面对 上传信息的需求。详情请看事件
• 支持挂载用户数据：by-uploader 中每个类中都有一个 userData 属性，用于方便用户挂载用户数据，并为设计了泛型。
• 可自定义底层的请求工具（下个大版本实现）：用户可以使用自己喜欢的请求库，比如 axios、umi-request 等等 作为底层的请求工具。

详情请看：

• 主页：https://github.com/GuoBinyong/by-uploader
• GitHub仓库
• 码云仓库
• 教程
• 上传业务流程和后端接口的设计
• 经典方案示例
• 设计与内部机制
• 事件
• API接口文档

如果您在使用的过程中遇到了问题，或者有好的建议和想法，您都可以通过以下方式联系我，期待与您的交流：

• 给该仓库提交 issues
• 给我 Pull requests
• 邮箱：[e-mail]
• 微信：keyanzhe

3. 安装方式

目前，安装方式有以下几种：

3.1. 方式1：通过 npm 安装

npm install by-uploader

3.2. 方式3：通过<script>标签引入

您可直接从项目的 发行地址 中下载以 .iife.js 作为缀的文件，然后使用如下代码引用 和 使用 by-uploader：

1. 引用 by-uploader

   <script src="path/to/package/by-uploader.iife.js"></script>
   

2. 使用全局的 by-uploader

   <script>
   // 使用全局的 ByUploader
   const uploader = new ByUploader();
   </script>
   

4. 教程

• 如果想了解如何使用，请看 教程
• 如果想了解或设计上传业务流程，请看 上传业务流程和后端接口的设计
• 如果想了解如何适配后端接口，请看 经典方案示例

5. API接口文档

详情跳转至API接口文档

6. 设计与内部机制

详情跳转至设计与内部机制

7. 开发计划

• 预检支持取消上传；
• 可自定义底层的请求工具：用户可以使用自己喜欢的请求库，比如 axios、umi-request 等等 作为底层的请求工具。