• ? 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)目需求選擇合適的功能插件，保持代碼的簡潔性。

• ? 斷點(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 對象和引入 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 可以無縫對接到現(xiàn)有的技術(shù)棧中，例如：@uppy/vue 、@uppy/react、@uppy/svelte 和 @uppy/angular。

3、和其他庫對比

Uppy.js 和 Filepond.js 對比都是現(xiàn)代的、功能豐富的 JavaScript 文件上傳庫，它們各有特色和適用場景。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ā)指南。總的來說，Uppy.js 是一個(gè)功能強(qiáng)大、易于使用的文件上傳組件，可以幫助你輕松處理復(fù)雜的文件上傳需求。

祝好！

更多內(nèi)容請關(guān)注：猿鎮(zhèn)，一個(gè)分享有趣前端知識(shí)的公眾號(hào)。

往期回顧

• ? VTable，一款神奇的 JavaScript 開源高性能多維數(shù)據(jù)分析庫？

• ? Signature_Pad，一款神奇的 JavaScript 開源手寫簽名庫?

• ? Frappe Gantt，一款神奇的 JavaScript 開源甘特圖庫？

• ? Filepond.js，一款神奇的 JavaScript 開源文件上傳庫?

• ? Lexical，一款神奇的 JavaScript 開源富文本編輯器。

引用鏈接

[1] Github Star: 28.7k: https://github.com/transloadit/uppy
[2] 官網(wǎng): https://uppy.io/