Uppy - 免费开源、功能强大的新一代 web 文件上传组件,支持集成到 Vue 项目

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

相关推荐
安全系统学习1 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖1 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖1 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水2 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐2 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06272 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台2 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
灿灿121382 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css
烛阴2 小时前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript
AntBlack3 小时前
拖了五个月 ,不当韭菜体验版算是正式发布了
前端·后端·python