电商网站与大数据大型的营销型网站

Uppy 这个优质的前端组件，可以解决几乎所有的文件上传问题，最近发布了 TS 重写的 4.0 新版本，实用性更强了。

Uppy 是一个 UI 外观时尚、模块化的 JavaScript 文件上传组件，这个组件可以与任何 web 技术栈集成，不仅轻量速度快，拥有断点续传、国际化，以及预览、编辑和多文件上传的功能，提供的 API 很容易上手理解，可以帮开发者解决前端开发遇到的各种麻烦的文件上传问题。

网上不少文章称为 Uppy.js，实际上 .js 后缀一般是作为 JavaScript 工具库的名称，而官方命名的 Uppy，也说明了这是一个拥有 UI 界面的组件，所以我这篇文章还是沿用 Uppy 这个名称吧。

对了，为什么叫 Uppy，其实官方是这样形容这个组件的：

Cute as a puppy.
— 像小狗一样可爱
我个人也非常喜欢这个简单有创意的名字。

• 漂亮新潮的外观，以及基于新一代浏览器打造的优秀体验；
• 模块化的架构，所有功能都可以通过插件来实现；
• 支持多种上传方式：包括拖放、选择文件、摄像头捕捉等，能够满足不同场景下的需求；
• 内置事件管理系统，可以方便地进行上传状态监听和错误处理；
• 支持多种语言，当然也支持中文。

4种上传界面

Uppy 虽然只是一个组件，但它提供了四种类型上传界面：

我们只需要根据自己项目的需求来选择展示的方式即可。Dashboard 方式除了本地选择文件，还支持远程URL、Google Drive、Dropbox、Box、Instagram 等国外通用方式获取文件。

安装使用

Uppy 几乎支持所有的技术栈，官方提供了 Vue / React / Svelte / Angular 项目的集成方式，我们可以根据实际情况去查阅。

这里为了演示方便，就直接通过引入 js 文件的方式来集成。

这样一个简单的拖拽上传文件的组件就做好了，功能强大，但用起来是真的简单。Uppy 的官方做得也很漂亮，更多的用法可以去官网看看。

Uppy 是一个免费开源的 web 文件上传组件，基于 MIT 开源协议，我们可以自由地下载来使用，也可以用在商业项目上。

Uppy 这个项目由 Transloadit 团队开发并且维护，这是一个小的技术团队，除了开源项目，他们也提供了商业服务项目，他们希望通过开源项目帮助更多技术人，同时宣传他们的商业项目。

原文链接：https://www.thosefree.com/uppy