與 Uppy 整合 | ArcBlock

@blocklet/uploader 套件直接建構在 Uppy 之上，Uppy 是一個時尚、模組化且開源的網頁檔案上傳工具。我們沒有從頭開始建構檔案上傳工具，而是利用 Uppy 強大的核心引擎、豐富的外掛生態系統以及精美的用戶介面。這使我們能夠提供一個穩定且功能豐富的上傳體驗，同時專注於在 Blocklet 生態系統中實現無縫整合。

這種方法意味著 @blocklet/uploader 基本上是 Uppy 的一個預先配置和增強的封裝器，專為 Blocklet 開發量身打造。

核心架構

Uploader 元件會初始化並管理一個核心的 Uppy 實例。然後，它會整合一套標準的 Uppy 外掛以實現常用功能（例如 Dashboard UI、Webcam 存取和用於可續傳上傳的 Tus），並疊加專為與其他 Blocklet（例如 Media Kit）互動而設計的自訂外掛。

下圖說明了這種關係：

存取核心 Uppy 實例

對於進階使用情境，您可能需要直接與底層的 Uppy 實例互動以存取其豐富的 API。Uploader 元件提供了一個 ref，它公開了一個 getUploader() 方法，讓您可以完全存取 Uppy 物件。

這讓您可以透過程式控制上傳工具、監聽 Uppy 特定的事件，或呼叫 Uppy API 文件中可用的任何方法。

存取 Uploader 實例

import { useRef, useEffect } from 'react';
import { Uploader } from '@blocklet/uploader';

export default function MyComponent() {
  const uploaderRef = useRef(null);

  useEffect(() => {
    if (uploaderRef.current) {
      const uppy = uploaderRef.current.getUploader();

      // 現在您可以使用完整的 Uppy API
      uppy.on('complete', (result) => {
        console.log('上傳完成！', result.successful);
      });

      console.log('Uppy 實例已準備就緒：', uppy.getID());
    }
  }, []);

  return <Uploader ref={uploaderRef} popup />;
}

前後端分離

重要的是要理解 @blocklet/uploader 是一個純前端套件。它負責使用者介面和客戶端的上傳邏輯。它不依賴於 @blocklet/uploader-server。

預設情況下，它使用 Tus 協定進行可續傳上傳，這意味著它可以與任何後端伺服器通訊，只要該伺服器實現了 Tus 規範。@blocklet/uploader-server 是為 Blocklet 開發者提供的一個方便、開箱即用的後端解決方案，但您也可以自由地實現自己的後端或使用其他與 Tus 相容的服務。

核心架構

存取核心 Uppy 實例

前後端分離

更多資訊