介紹

Web瀏覽器的下一個開源文件上傳庫，Uppy是一款時尚的模塊化JavaScript文件上傳器，可與任何應用程序無縫集成。它快速，易于使用，讓你專注于比構建文件上傳器更重要的問題。這款文件上傳庫在Github上已經突破20k+star,可見其受歡迎程度以及開發者對其認可度！下面是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) 
 }) 

相關特性

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

相關文檔

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

其它介紹

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

其文檔不僅僅非常詳細，而且還提供了在線完整demo進行體驗

總結

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