文件

無法在AEMaaCS中載入「Coral.FileUpload」

Last update: Thu Sep 25 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

在Adobe Experience Manager as a Cloud Service (AEMaaCS) - Assets中，當插入如Coral.FileUpload的頁面時，/aem/start.html元件無法轉譯或運作。 若要解決此問題，請在包含所需元素的有效內容中使用元件。

說明 description

環境

  • 產品： Adobe Experience Manager as a Cloud Service (AEMaaCS) - Assets
  • SDK版本： v2025.7.21706.20250723T205632Z-250700

問題/症狀

  • 選取檔案 按鈕無法以Coral UI樣式呈現。
  • 按一下按鈕不會觸發檔案選取對話方塊。
  • 瀏覽器主控台或網路活動中不會出現任何錯誤。
  • 轉譯的頁面中完全沒有檔案上傳介面。

原因

將Coral.FileUpload的原始標籤或JavaScript插入缺少必要使用者端程式庫和初始化邏輯（例如/aem/start.html）的頁面時，就會發生問題。

解決方法 resolution

若要確保Coral.FileUpload元件正常運作，請遵循下列步驟：

  1. 只能在正確設定的AEM內容中使用Coral.FileUpload。 請確定已載入所有必要的使用者端程式庫（例如coralui3）。 請勿將原始標籤插入類似/aem/start.html的頁面。

  2. 至少新增一個具有coral-fileupload-select屬性的子專案。 此元素會作為檔案選取的觸發條件。

  3. 如果您是以程式設計方式建立元件，請包含子按鈕元素。 範例如下：

    code language-none 
    dialogContent.appendChild((function () {
    var upload = new Coral.FileUpload().set({
        accept: "image/*",
        sizeLimit: 1000,
        name: "file",
        action: "path/to/upload"
    });
    var selectBtn = new Coral.Button().set({
        label: { innerHTML: "Select files…" }
    });
    // Mark this button as the "select" trigger
    selectBtn.setAttribute("coral-fileupload-select", "");
    // Append the button into the FileUpload component
    upload.appendChild(selectBtn);
    return upload;
})());

  4. 更新實作後，請確認下列事項：

    • 選取檔案 按鈕以正確的樣式顯示。
    • 按一下按鈕可開啟檔案選取對話方塊。
    • 所有必要的使用者端程式庫都已成功載入。
    • 瀏覽器主控台中未出現任何錯誤。

相關閱讀

Coral.FileUpload檔案

recommendation-more-help
3d58f420-19b5-47a0-a122-5c9dab55ec7f