介紹

Web瀏覽器的下一個開源文件上傳庫，Uppy是一款時尚的模塊化JavaScript文件上傳器，可與任何應(yīng)用程序無縫集成。它快速，易于使用，讓你專注于比構(gòu)建文件上傳器更重要的問題。這款文件上傳庫在Github上已經(jīng)突破20k+star,可見其受歡迎程度以及開發(fā)者對其認(rèn)可度！下面是Github上一個簡單的示例截圖：

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) 
  
  
  
 }) 
 
 

相關(guān)特性

• 輕量級，基于模塊化插件的架構(gòu)，易于依賴
• 通過開放的tus標(biāo)準(zhǔn)上傳可恢復(fù)文件，因此大型上傳可以避免網(wǎng)絡(luò)不穩(wěn)定
• 支持從以下網(wǎng)站挑選文件：Webcam，Dropbox，Google Drive，Instagram，盡可能繞過用戶的設(shè)備，通過@ uppy / companion直接在服務(wù)器之間進(jìn)行同步
• 適用于文件編碼和處理后端（如Transloadit）非常適用，沒有（只需配合自己的Apache / Nginx / Node / FFmpeg / etc后端服務(wù)端）
• 流暢的用戶界面
• 使用Golden Retriever進(jìn)行可選文件恢復(fù)（瀏覽器崩潰后）
• 國際化支持（i18n）
• 內(nèi)置可訪問性
• 永久免費(fèi)

相關(guān)文檔

作者提供了其非常詳細(xì)的文檔，但是不提供中文文檔，不過無需擔(dān)心，借助瀏覽器端的翻譯功能，還是難不倒大家的，或者借助第三方的翻譯插件，或者QQ瀏覽器也很不錯，比如像下面這樣非常方便，閱讀自己想要閱讀的部分，筆者日常就是如此：

其它介紹

只需使用Uppy客戶端模塊，就可以進(jìn)行拖放，網(wǎng)絡(luò)攝像頭，基本文件操作（添加元數(shù)據(jù)），通過tus-resumable上傳或XHR / Multipart上傳。而且還提供與React的集成，使用react的小伙伴無需再自己封裝，Uppy提供React組件UI插件。

其文檔不僅僅非常詳細(xì)，而且還提供了在線完整demo進(jìn)行體驗(yàn)

總結(jié)

總體來說，uppy是一個非常不錯的文件上傳組件，提供豐富的功能，特別是提供拖拽的方式以及調(diào)用攝像頭方式上傳，非常的人性化，是一個非常值得嘗試使用的JavaScript庫，為我們帶來了很大的便利性，當(dāng)然好用的插件有不少，比如WebUploader，還有在之前筆者也曾介紹過另一個插件DropzoneJS，也非常不錯,支持拖拽上傳，感興趣的小伙伴也可以去看一看！

標(biāo)題名稱：瀏覽器下一代的Javascript文件上傳庫：uppy.js
鏈接分享：http://uogjgqi.cn/article/djphipd.html