Uppy是一个简洁模块化的开源JavaScript文件上传器
Uppy
Uppy 是一款简洁、模块化的 JavaScript 文件上传器，可与任何应用程序无缝集成。它速度快，API 通俗易懂，让您可以专注于构建文件上传器之外更重要的问题。
- 从本地磁盘、远程 URL、Google Drive、Dropbox、Box、Instagram 或使用相机自拍和录制视频，获取文件。
- 使用美观的界面预览和编辑元数据。
- 上传到最终目标，并可选择进行处理/编码。
Example
Code used in the above example:
import Uppy from '@uppy/core'
import Dashboard from '@uppy/dashboard'
import RemoteSources from '@uppy/remote-sources'
import ImageEditor from '@uppy/image-editor'
import Webcam from '@uppy/webcam'
import Tus from '@uppy/tus'
const uppy = new Uppy()
.use(Dashboard, { trigger: '#select-files' })
.use(RemoteSources, { companionUrl: 'https://companion.uppy.io' })
.use(Webcam)
.use(ImageEditor)
.use(Tus, { endpoint: 'https://tusd.tusdemo.net/files/' })
.on('complete', (result) => {
console.log('Upload result:', result)
})在线试用 或
阅读文档 了解更多关于如何使用 Uppy 及其插件的详细信息。
集成
Uppy 对纯 JS/HTML、
React、Svelte、
Vue 和 Angular 提供一流的支持。
对于支持的框架（Angular 除外），Uppy 提供了三种构建用户界面的方式：
- 预编写、即插即用的组件。主要为
<Dashboard />。
缺点是无法自定义 UI。 - 无头组件。更小的组件，更容易覆盖样式
或将它们与您自己的组件组合在一起。 - 钩子。将我们的逻辑附加到您自己的组件，没有任何限制，创建
量身定制的 UI。
功能
- 轻量级、模块化、基于插件的架构，依赖关系少 :zap:
- 通过开放的 tus 标准实现断点续传，因此大文件上传即使网络中断也能继续支持从以下位置选择文件：网络摄像头、Dropbox、Box、Google Drive、Instagram尽可能绕过用户设备，直接通过 @uppy/companion 在服务器之间同步
- 与文件编码和处理后端（例如Transloadit）完美兼容，即使没有 Transloadit 也能完美运行（您只需构建您自己的 Apache/Nginx/Node/FFmpeg/etc 后端）
- 简洁的用户界面 :sparkles:
- 可选文件恢复（浏览器崩溃后），使用Golden Retriever
- 支持多种语言(i18n) :earth_africa:
- 构建时充分考虑了无障碍性
- 永久免费（例如啤酒🍺、披萨🍕和自由🗽）
- 像小狗一样可爱，也接受猫咪图片 :dog:
安装
npm install @uppy/core @uppy/dashboard @uppy/tus添加 CSS uppy.min.css，可以添加到 HTML 页面的 <head> 中，也可以包含在 JS 文件中（如果您选择的打包工具支持的话）。
或者，您也可以使用 Transloadit CDN 中预先构建的打包文件：SmartCDN。在这种情况下，Uppy 会将自身附加到全局 window.Uppy 对象上。
⚠️ 该软件包包含大多数 Uppy 插件，因此不建议将此方法用于生产环境，因为您的用户必须下载所有插件，而您可能只会使用少数插件。
<!-- 1. Add CSS to `<head>` -->
<link
href="https://releases.transloadit.com/uppy/v5.1.6/uppy.min.css"
rel="stylesheet"
/>
<!-- 2. Initialize -->
<div id="files-drag-drop"></div>
<script type="module">
import {
Uppy,
Dashboard,
Tus,
} from 'https://releases.transloadit.com/uppy/v5.1.6/uppy.min.mjs'
const uppy = new Uppy()
uppy.use(Dashboard, { target: '#files-drag-drop' })
uppy.use(Tus, { endpoint: 'https://tusd.tusdemo.net/files/' })
</script>文档
- Uppy — 完整的选项、方法和事件列表
- Companion — 设置并运行 Companion 实例，支持 Instagram、Dropbox、Box、Google Drive 和远程 URL
- React — 用于将 Uppy UI 插件与 React 应用集成的组件
- 架构与插件编写 — 如何为 Uppy 编写插件
插件
UI 元素
-
Dashboard— 通用 UI，包含预览、进度条、元数据编辑器以及所有酷炫的功能。大多数 UI 插件（例如 Webcam 和 Instagram）都需要
源
拖放— 简单的拖放区域文件输入— 更简单的“选择文件”按钮网络摄像头— 拍摄并录制自拍 📷- ⓒ
Google Drive— 从 Google Drive 导入文件 - ⓒ
Dropbox— 从 Dropbox 导入文件 - ⓒ
Box— 从 Box 导入文件 - ⓒ
Instagram— 从 Instagram 导入图片和视频 - ⓒ
Facebook— 从 Facebook 导入图片和视频 - ⓒ
OneDrive— 从 Microsoft OneDrive 导入文件 - ⓒ
从 URL 导入— 从网络上的任何地方导入直接 URL
ⓒ 标记表示需要 @uppy/companion，这是一个服务器端组件使插件能够工作。
目标
Tus— 通过开放的tus 标准进行断点续传XHR Upload— 为任何后端（例如 Apache、Nginx）提供常规上传AWS S3— 直接上传到 AWS S3 或兼容服务
文件处理
Transloadit— 支持Transloadit 强大的文件上传和编码后端
其他
Golden Retriever— 在浏览器崩溃后恢复文件没什么缩略图生成器— 生成图片预览（Dashboard默认包含）表单— 在 Uppy 上传之前从<form>收集元数据，然后可选择将结果附加回表单
浏览器支持
我们的目标是支持最新版本的 Chrome、Firefox 和 Safari。
常见问题解答
为什么不使用 <input type="file">？
没有 JavaScript 总比有大量 JavaScript 好，所以这个问题问得有道理！虽然我们经营上传和编码业务已有十年，但我们发现，在某些情况下，文件输入功能存在一些不足之处：
- 我们收到了关于上传中断的投诉，并发现可续传上传非常重要，尤其是对于大文件上传，并且为了兼容网络连接较差的用户（我们还推出了 tus.io 来解决这个问题）。Uppy 上传功能可以应对网络中断、浏览器崩溃或意外跳转的情况。
- Uppy 支持在上传前编辑元信息。
- Uppy 允许在上传前裁剪图片。
- 有一种情况是，人们正在使用移动设备，想要随时随地上传，但他们的照片在Instagram 上，文件在 Dropbox 中，或者在开放网络上的任何地方都有一个纯文本文件 URL。 Uppy 允许从中选择文件并将其推送到目标位置，而无需先将其下载到您的移动设备。
- 准确的上传进度报告在许多平台上都是一个问题。
- 一些文件验证——大小、类型、文件数量——可以在 Uppy 的客户端上完成。
- Uppy 集成了网络摄像头支持，方便您的用户上传尚不存在的图片/视频/音频 :)
- 更大的拖放界面使用起来更加便捷。有些人也喜欢您可以控制样式、语言等。
- Uppy 可以感知编码后端。上传后，服务器通常需要旋转、检测人脸、针对 iPad 进行优化或其他操作。Uppy 可以跟踪这些操作的进度，并以不同的方式向用户报告。
- 有时您可能希望在同一个页面上继续交互的同时进行上传。
并非所有应用都需要所有这些功能。在许多情况下，<input type="file"> 就足够了。但这些客户提出的问题，足以激励我们开发 Uppy。
为什么所有这些好东西都是免费的？
Transloadit 团队规模很小，但我们都有一个共同的目标，那就是依靠开源谋生。通过免费提供 tus.io 和Uppy 等项目，我们希望能够推动技术进步，让每个人的生活都变得更好一点，同时创造有意义的工作，并让更多人关注我们的商业服务：内容提取和处理平台。
我们的想法是，即使只有一小部分开源用户能够直接看到托管版本的吸引力，也足以维持我们的工作。到目前为止，这很有效！我们能够将 80% 的时间投入到开源项目中，而且还没有破产。
Uppy 支持 S3 上传吗？
是的，请查看文档了解更多信息。
我可以将 Uppy 与 Rails/Node.js/Go/PHP 一起使用吗？
是的，无论您在后端需要什么，都可以使用 @uppy/xhr-upload 插件，因为它只处理 POST 或 PUT 请求。这是一个PHP 后端示例。
如果您希望 Tus 插件支持断点续传，请使用其中一个 tus 服务器实现 👌🏼
如果您希望用户能够从 Instagram、Google Drive、Dropbox或通过直接 URL（更多服务即将推出）选择文件，则需要 @uppy/companion。
许可证
MIT 许可证