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