建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
瀏覽器下一代的Javascript文件上傳庫：uppy.js
介紹
Web瀏覽器的下一個開源文件上傳庫，Uppy是一款時尚的模塊化JavaScript文件上傳器，可與任何應(yīng)用程序無縫集成。它快速，易于使用，讓你專注于比構(gòu)建文件上傳器更重要的問題。這款文件上傳庫在Github上已經(jīng)突破20k+star,可見其受歡迎程度以及開發(fā)者對其認可度！下面是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標準上傳可恢復(fù)文件，因此大型上傳可以避免網(wǎng)絡(luò)不穩(wěn)定
- 支持從以下網(wǎng)站挑選文件：Webcam，Dropbox，Google Drive，Instagram，盡可能繞過用戶的設(shè)備，通過@ uppy / companion直接在服務(wù)器之間進行同步
- 適用于文件編碼和處理后端（如Transloadit）非常適用，沒有（只需配合自己的Apache / Nginx / Node / FFmpeg / etc后端服務(wù)端）
- 流暢的用戶界面
- 使用Golden Retriever進行可選文件恢復(fù)（瀏覽器崩潰后）
- 國際化支持（i18n）
- 內(nèi)置可訪問性
- 永久免費
相關(guān)文檔
作者提供了其非常詳細的文檔，但是不提供中文文檔，不過無需擔(dān)心，借助瀏覽器端的翻譯功能，還是難不倒大家的，或者借助第三方的翻譯插件，或者QQ瀏覽器也很不錯，比如像下面這樣非常方便，閱讀自己想要閱讀的部分，筆者日常就是如此：
其它介紹
只需使用Uppy客戶端模塊，就可以進行拖放，網(wǎng)絡(luò)攝像頭，基本文件操作（添加元數(shù)據(jù)），通過tus-resumable上傳或XHR / Multipart上傳。而且還提供與React的集成，使用react的小伙伴無需再自己封裝，Uppy提供React組件UI插件。
其文檔不僅僅非常詳細，而且還提供了在線完整demo進行體驗
總結(jié)
總體來說，uppy是一個非常不錯的文件上傳組件，提供豐富的功能，特別是提供拖拽的方式以及調(diào)用攝像頭方式上傳，非常的人性化，是一個非常值得嘗試使用的JavaScript庫，為我們帶來了很大的便利性，當(dāng)然好用的插件有不少，比如WebUploader，還有在之前筆者也曾介紹過另一個插件DropzoneJS，也非常不錯,支持拖拽上傳，感興趣的小伙伴也可以去看一看！
分享名稱：瀏覽器下一代的Javascript文件上傳庫：uppy.js
分享鏈接：http://www.5511xx.com/article/djphipd.html
