Question

我正在尝试修改现有的图像组件，因此编辑对话框将有两个选项卡，第一个选项卡用于上传图像的桌面版本，第二个选项卡用于上传图像的移动版本。

当文件只有一个字段时，最初文件上传功能起作用。该图像将作为内容文件夹下的文件创建。

我修改了组件并使字段具有不同的名称。图像在内容文件夹中创建，但不在UI中呈现。

如果我们使用“file”作为属性名称，它将起作用，但是当我们上传第二个图像时，它将被覆盖。似乎它只将“文件”识别为名称。

您是否碰巧知道如何呈现在内容文件夹中创建的图像或配置要呈现的文件名？

<content
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/foundation/container">
<layout
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/foundation/layouts/tabs"
        type="nav"/>
<items jcr:primaryType="nt:unstructured">
    <desktop
            jcr:primaryType="nt:unstructured"
            jcr:title="Desktop"
            sling:resourceType="granite/ui/components/foundation/section">
        <layout
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"/>
        <items jcr:primaryType="nt:unstructured">
            <column
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/foundation/container">
                <items jcr:primaryType="nt:unstructured">
                    <imagePathDesktop1
                            jcr:primaryType="nt:unstructured"
                            sling:resourceType="granite/ui/components/foundation/form/fileupload"
                            autoStart="{Boolean}false"
                            class="cq-droptarget"
                            fieldLabel="Desktop"
                            fileNameParameter="./imagePathDesktop"
                            mimeTypes="[image]"
                            multiple="{Boolean}true"
                            name="./imgDesktop"
                            title="Image Path"
                            uploadUrl="${suffix.path}"
                            useHTML5="{Boolean}true"/>
                </items>
            </column>
        </items>
    </desktop>
    <mobile
            jcr:primaryType="nt:unstructured"
            jcr:title="Mobile"
            sling:resourceType="granite/ui/components/foundation/section">
        <layout
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"/>
        <items jcr:primaryType="nt:unstructured">
            <column
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/foundation/container">
                <items jcr:primaryType="nt:unstructured">
                    <imagePathMobile2
                            jcr:primaryType="nt:unstructured"
                            sling:resourceType="granite/ui/components/foundation/form/fileupload"
                            autoStart="{Boolean}false"
                            class="cq-droptarget"
                            fieldLabel="Mobile"
                            fileNameParameter="./imagePathMobile"
                            fileReferenceParameter="./imageReferenceMob"
                            mimeTypes="[image]"
                            multiple="{Boolean}false"
                            name="./imgMobile"
                            title="Image Path"
                            uploadUrl="${suffix.path}"
                            useHTML5="{Boolean}true"/>
                </items>
            </column>
        </items>
    </mobile>
</items> </content>

Answer 1

Image类，更具体地说是Image继承的com.day.cq.commons.DownloadResource类，期望上传文件的资源的名称是＆＃34; file＆＃34;除非明确覆盖。根据这种期望，当单个组件允许多个图像时，每个图像应该被放置在唯一的子资源中，并且文件应该被上载到名为＆＃34; file＆＃34;的该资源的子资源。也就是说，您的配置非常接近所需。我建议以下更新。

首先，将name参数分别更改为./imgDesktop/file和./imgMobile/file。

同样更新fileNameParameter和fileReferenceParameter以包含相对路径，例如./imgDesktop/fileReference。

您还需要添加隐藏的对话框属性，这些属性会将./imgDesktop和./imgMobile的sling:resourceType设置为从foundation/components/parbase延伸的内容，因为图像呈现机制为libs/foundation/components/parbase/img.GET.java 。位于wcm/foundation/components/textimage的OOB textimage组件就是一个很好的例子，它将图像资源的sling:resourceType设置为foundation/components/image。

用于展示图片的路径分别为resource.path + "/imgDesktop.img.png"和resource.path + "/imgMobile.img.png"。

Adobe AEM |图像组件的多个图像上传（触摸UI）

1 个答案: