? Github Star: 28.7k[1]
? 官網(wǎng)[2]
1、Uppy.js 是什么？
Uppy.js 是一個(gè)現(xiàn)代化的、模塊化的 JavaScript 文件上傳器，它可以無縫地集成到任何應(yīng)用程序中。它具備輕量級(jí)、易于使用的特點(diǎn)，并支持從本地磁盤、遠(yuǎn)程 URL、云存儲(chǔ)服務(wù)等多種途徑獲取文件，并通過相機(jī)捕獲和記錄自拍等方式上傳文件。Uppy.js 提供了豐富的功能，如漂亮的界面預(yù)覽和編輯元數(shù)據(jù)，以及可選擇的文件處理和編碼后端，如 Transloadit。它還支持?jǐn)帱c(diǎn)續(xù)傳，避免了因網(wǎng)絡(luò)不穩(wěn)定而導(dǎo)致的大文件上傳失敗問題。
特性
? 模塊化：采用模塊化的架構(gòu)設(shè)計(jì)，根據(jù)項(xiàng)目需求選擇合適的功能插件，保持代碼的簡(jiǎn)潔性。
? 斷點(diǎn)續(xù)傳：基于 tus 標(biāo)準(zhǔn)實(shí)現(xiàn)了斷點(diǎn)續(xù)傳功能，保證在網(wǎng)絡(luò)不穩(wěn)定的情況下提升大文件傳輸?shù)目煽啃浴?/p>
? 多來源文件：除本地文件，還支持從遠(yuǎn)程 URL 獲取文件。可實(shí)現(xiàn)繞過用戶設(shè)備，直接服務(wù)器間同步文件。
? 預(yù)覽和編輯：良好的用戶界面，允許預(yù)覽文件并編輯元信息。
2、快速開始
在項(xiàng)目中使用 Uppy.js，首先需要通過 npm 或 yarn 安裝它：
npm install @uppy/core @uppy/dashboard @uppy/tus
然后在項(xiàng)目中引入 js 文件和 css。
// main.js
import Uppy from '@uppy/core' // 核心庫
import Dashboard from '@uppy/dashboard' // 儀表盤
import zh_CN from '@uppy/locales/lib/zh_CN' // 國際化中文
// 引入樣式
import '@uppy/core/dist/style.css'
import '@uppy/dashboard/dist/style.css'
創(chuàng)建 Uppy 對(duì)象和引入 Dashboard并添加配置
const uppy = new Uppy({
debug: true,
autoProceed: false, // 自動(dòng)上傳
locale: zh_CN, // 國際化
restrictions: {
maxFileSize: 1000,
maxNumberOfFiles: 10,
allowedFileTypes: ['image/*'],
},
})
uppy.use(Dashboard, {
inline: true, // 內(nèi)聯(lián)頁面
target: '#app', // 掛載的目標(biāo)元素
theme: 'dark', // 主題 dark
note: '最多上傳 10 個(gè)文件，僅支持圖片' // 上傳文件的說明
})
// 監(jiān)聽 complete 事件，該事件在所有文件上傳后觸發(fā)。
uppy.on('complete', (result) => {
if (result.failed.length === 0) {
console.log('上傳成功 ??')
} else {
console.warn('上傳失敗 ??')
}
console.log('成功文件:', result.successful)
console.log('失敗文件:', result.failed)
})
Uppy 常用包
? @uppy/core : Uppy 的核心是插件的協(xié)調(diào)器；通過它構(gòu)建自己的 UI 或者進(jìn)行 Dashboard 集成。
? @uppy/dashboard：通用 UI，帶有預(yù)覽、進(jìn)度條、元數(shù)據(jù)編輯器和所有很酷的東西。
? @uppy/drag-drop：插件呈現(xiàn)一個(gè)用于文件選擇的拖放區(qū)域。
? @uppy/webcam：插件可讓您使用桌面和移動(dòng)設(shè)備上的內(nèi)置攝像頭拍照和錄制視頻。
? @uppy/screen-capture：插件可以錄制您的屏幕或應(yīng)用程序并將其保存為視頻。
? @uppy/url：插件允許用戶從互聯(lián)網(wǎng)導(dǎo)入文件。粘貼任何 URL，它將被添加！
? @uppy/tus：插件通過包裝 tus-js-client 為 Uppy 帶來了 Tus 的可斷點(diǎn)續(xù)傳文件上傳功能。
? @uppy/xhr-upload：插件用于定期上傳到 HTTP 服務(wù)器。
? @uppy/transloadit：插件可用于將文件直接上傳到 Transloadit 進(jìn)行各種處理，例如轉(zhuǎn)碼視頻、調(diào)整圖像大小、壓縮/解壓縮等等。
? @uppy/progress-bar: 上傳進(jìn)度時(shí)自動(dòng)填充的最小進(jìn)度條
? @uppy/status-bar：插件顯示上傳進(jìn)度和速度、預(yù)計(jì)時(shí)間、預(yù)處理和后處理信息，并允許用戶控制（暫停/恢復(fù)/取消）上傳。
? @uppy/informer 插件是一個(gè)彈出欄，用于顯示 Dashboard 的通知。
? @uppy/thumbnail-generator 為添加到 Uppy 的圖像生成比例縮略圖（文件預(yù)覽）。
? @uppy/drop-target 插件允許用戶將文件拖放到頁面上的任何元素上，例如整個(gè)頁面 document.body 。
? @uppy/image-editor 當(dāng)您希望允許用戶裁剪、旋轉(zhuǎn)、縮放和翻轉(zhuǎn)添加到 Uppy 的圖像時(shí)。
另外，Uppy 可以無縫對(duì)接到現(xiàn)有的技術(shù)棧中，例如：@uppy/vue 、@uppy/react、@uppy/svelte 和 @uppy/angular。
3、和其他庫對(duì)比
Uppy.js 和 Filepond.js 對(duì)比都是現(xiàn)代的、功能豐富的 JavaScript 文件上傳庫，它們各有特色和適用場(chǎng)景。Uppy.js 強(qiáng)調(diào)模塊化和高度的可定制性，適合需要高度個(gè)性化的復(fù)雜項(xiàng)目。而 Filepond 則側(cè)重于易用性和響應(yīng)式設(shè)計(jì)，更適合追求快速集成的項(xiàng)目。
4、總結(jié)
日常開發(fā)，可以通過 Uppy.js 的插件系統(tǒng)來擴(kuò)展 Uppy 的功能，可以根據(jù)需要選擇合適的插件來增強(qiáng)文件上傳體驗(yàn)。如果想創(chuàng)建自己的插件，可以參考Uppy.js的插件開發(fā)指南?？偟膩碚f，Uppy.js 是一個(gè)功能強(qiáng)大、易于使用的文件上傳組件，可以幫助你輕松處理復(fù)雜的文件上傳需求。
祝好！
更多內(nèi)容請(qǐng)關(guān)注：猿鎮(zhèn)，一個(gè)分享有趣前端知識(shí)的公眾號(hào)。
往期回顧
引用鏈接
[1] Github Star: 28.7k: https://github.com/transloadit/uppy
[2] 官網(wǎng): https://uppy.io/
該文章在 2024/10/12 10:19:47 編輯過
400 186 1886
