松鼠乐园 松鼠乐园
  • 注册
  • 登录
  • 首页
  • 快捷入口
    • Vue
    • Tensorflow
    • Springboot
    • 语言类
      • CSS
      • ES5
      • ES6
      • Go
      • Java
      • Javascript
    • 工具类
      • Git
      • 工具推荐
    • 服务器&运维
      • Centos
      • Docker
      • Linux
      • Mac
      • MySQL
      • Nginx
      • Redis
      • Windows
    • 资源类
      • 论文
      • 书籍推荐
      • 后端资源
      • 前端资源
      • html网页模板
      • 代码
    • 性能优化
    • 测试
  • 重大新闻
  • 人工智能
  • 开源项目
  • Vue2.0从零开始
  • 广场
首页 › Javascript › 浏览器下一代的Javascript文件上传库——uppy.js

浏览器下一代的Javascript文件上传库——uppy.js

迦娜王
2年前Javascript
1,300 0 0

介绍

Web浏览器的下一个开源文件上传库,Uppy是一款时尚的模块化JavaScript文件上传器,可与任何应用程序无缝集成。它快速,易于使用,让你专注于比构建文件上传器更重要的问题。这款文件上传库在Github上已经突破20k star,可见其受欢迎程度以及开发者对其认可度!下面是Github上一个简单的示例截图:


浏览器下一代的Javascript文件上传库——uppy.js

Github地址

https://github.com/transloadit/uppy

示例代码

npm install @uppy/core @uppy/dashboard @uppy/instagram @uppy/tus

import Uppy from \'@uppy/core\'
import Dashboard from \'@uppy/dashboard\'
import Instagram from \'@uppy/instagram\'
import Tus from \'@uppy/tus\'
Uppy()
 .use(Dashboard, {
 trigger: \'#select-files\',
 showProgressDetails: true
 })
 .use(Instagram, {
 target: Dashboard,
 companionUrl: \'\'
 })
 .use(Tus, { endpoint: \'\' })
 .on(\'complete\', (result) => {
 console.log(\'Upload result:\', result)
 })

const Uppy = require(\'@uppy/core\')
const Dashboard = require(\'@uppy/dashboard\')
const GoogleDrive = require(\'@uppy/google-drive\')
const Instagram = require(\'@uppy/instagram\')
const Webcam = require(\'@uppy/webcam\')
const Tus = require(\'@uppy/tus\')
const uppy = Uppy({ autoProceed: false })
 .use(Dashboard, { trigger: \'#select-files\' })
 .use(GoogleDrive, { target: Dashboard, companionUrl: \'\' })
 .use(Instagram, { target: Dashboard, companionUrl: \'\' })
 .use(Webcam, { target: Dashboard })
 .use(Tus, { endpoint: \'\' })
 .on(\'complete\', (result) => {
 console.log(\'Upload result:\', result)
 })

相关特性

  • 轻量级,基于模块化插件的架构,易于依赖
  • 通过开放的tus标准上传可恢复文件,因此大型上传可以避免网络不稳定
  • 支持从以下网站挑选文件:Webcam,Dropbox,Google Drive,Instagram,尽可能绕过用户的设备,通过@ uppy / companion直接在服务器之间进行同步
  • 适用于文件编码和处理后端(如Transloadit)非常适用,没有(只需配合自己的Apache / Nginx / Node / FFmpeg / etc后端服务端)
  • 流畅的用户界面
  • 使用Golden Retriever进行可选文件恢复(浏览器崩溃后)
  • 国际化支持(i18n)
  • 内置可访问性
  • 永久免费

相关文档

作者提供了其非常详细的文档,但是不提供中文文档,不过无需担心,借助浏览器端的翻译功能,还是难不倒大家的,或者借助第三方的翻译插件,或者QQ浏览器也很不错,比如像下面这样非常方便,阅读自己想要阅读的部分,笔者日常就是如此:


浏览器下一代的Javascript文件上传库——uppy.js

其它介绍

只需使用Uppy客户端模块,就可以进行拖放,网络摄像头,基本文件操作(添加元数据),通过tus-resumable上传或XHR / Multipart上传。而且还提供与React的集成,使用react的小伙伴无需再自己封装,Uppy提供React组件UI插件。


浏览器下一代的Javascript文件上传库——uppy.js

其文档不仅仅非常详细,而且还提供了在线完整demo进行体验


浏览器下一代的Javascript文件上传库——uppy.js

总结

总体来说,uppy是一个非常不错的文件上传组件,提供丰富的功能,特别是提供拖拽的方式以及调用摄像头方式上传,非常的人性化,是一个非常值得尝试使用的JavaScript库,为我们带来了很大的便利性,当然好用的插件有不少,比如WebUploader,还有在之前笔者也曾介绍过另一个插件DropzoneJS,也非常不错,支持拖拽上传,感兴趣的小伙伴也可以去看一看!以下是原文地址:

https://www.toutiao.com/i6692586683621179911/
uppy.js 文件上传插件
0
小白也能轻松管理kvm虚拟机|KVM虚拟机管理web化
上一篇
macOS 上最棒的 ZSH 用法,你会配置了么?
下一篇
评论 (0)

请登录以参与评论。

现在登录
聚合文章
Servicios profesionales Organizaciones
1年前
在Gitee收获近 5k Star,更新后的Vue版RuoYi有哪些新变化?
1年前
vue3.x reactive、effect、computed、watch依赖关系及实现原理
1年前
Vue 3 新特性:在 Composition API 中使用 CSS Modules
1年前
标签
AI AI项目 css docker Drone Elaticsearch es5 es6 Geometry Go gru java Javascript jenkins lstm mysql mysql优化 mysql地理位置索引 mysql索引 mysql规范 mysql设计 mysql配置文件 mysql面试题 mysql高可用 nginx Redis redis性能 rnn SpringBoot Tensorflow tensorflow2.0 UI设计 vue vue3.0 vue原理 whistle ZooKeeper 开源项目 抓包工具 日志输出 机器学习 深度学习 神经网络 论文 面试题
相关文章
这一次,彻底弄懂 JavaScript 执行机制
9 条非常强大的 JavaScript 技巧
7 个令人兴奋的 JavaScript 新特性
8个问题看你是否真的懂 JS
松鼠乐园

资源整合,创造价值

小伙伴
墨魇博客 无同创意
目录
重大新闻 Centos CSS Docker ES5 ES6 Go Java Javascript Linux Mac MySQL Nginx Redis Springboot Tensorflow Vue Vue2.x从零开始 Windows 书籍推荐 人工智能 前端资源 后端资源 壁纸 开源项目 测试 论文
Copyright © 2018-2022 松鼠乐园. Designed by nicetheme. 浙ICP备15039601号-4
  • 重大新闻
  • Centos
  • CSS
  • Docker
  • ES5
  • ES6
  • Go
  • Java
  • Javascript
  • Linux
  • Mac
  • MySQL
  • Nginx
  • Redis
  • Springboot
  • Tensorflow
  • Vue
  • Vue2.x从零开始
  • Windows
  • 书籍推荐
  • 人工智能
  • 前端资源
  • 后端资源
  • 壁纸
  • 开源项目
  • 测试
  • 论文
热门搜索
  • jetson nano
  • vue
  • java
  • mysql
  • 人工智能
  • 人脸识别
迦娜王
坚持才有希望
1224 文章
35 评论
242 喜欢
  • 0
  • 0
  • Top