File upload Adobe AEM |图像组件的多图像上传（触摸式用户界面）

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

最初，当图像只有一个字段时，fileupload函数起作用。图像将作为内容文件夹下的文件创建

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

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

您是否知道如何渲染在内容文件夹中创建的图像，或者如何配置要渲染的文件名

<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>

---

图像类，更具体地说是图像继承的

com.day.cq.commons.DownloadResource

类，希望上载文件的资源的名称为“file”，除非明确重写。根据这一预期，当单个组件允许多个映像时，每个映像都应包含在唯一的子资源中，并且文件应上载到该资源名为“file”的子资源中。也就是说，您的配置非常接近需要的配置。我建议进行以下更新

首先，将

name

参数分别更改为

/imgDesktop/file

和

/imgMobile/file

同样，更新

filename参数

和

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”

请共享对话框配置，以便其他人可以轻松调试该问题。我已使用对话框配置进行了更新。我已将名称参数更改为./imgDesktop/file和./imgMobile/file。并更新fileNameParameter和fileReferenceParameter以包含相对路径。该文件现在在节点immobile和imgDesktop下创建。但是当我尝试使用这些URL resource.path+“/imgDesktop.img.png”和resource.path+“/imgMobile.img.png”访问图像时，无法呈现图像。它是在图像文件存储在content_image文件夹下时呈现的。编辑了我先前的回答，以包括一些需要设置的附加属性，以确保您的图像资源具有正确的资源类型。我对AEM有点陌生，我正在使用JS处理图像，如何获得这两个图像？