无法在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组件正常工作，请执行以下步骤：

仅在正确配置的AEM上下文中使用Coral.FileUpload。确保已加载所有必需的客户端库（例如coralui3）。请勿将原始标记注入到/aem/start.html之类的页面中。
添加至少一个具有coral-fileupload-select属性的子元素。此元素用作文件选择的触发器。

如果要以编程方式创建组件，请包含子按钮元素。下面是一个示例：

code language-none

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; })());

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;
})());

更新实施后，请验证以下各项：
- 出现 选择文件 按钮时样式正确。
- 单击按钮可打开文件选择对话框。
- 所有必需的客户端库都已成功加载。
- 浏览器控制台中未显示任何错误。

无法在AEMaaCS中加载“Coral.FileUpload”

描述 description

环境

问题/症状

原因

解决方法 resolution

相关阅读