Magento 2 - 在页面加载时在图像上传器中显示保存的图像

Question

大家好，我正在使用 magento 2 图片上传器上传徽标和背景以供客户登录。 上传器工作正常并将图像保存在媒体文件夹中。问题是当我进入上传器页面（管理员）时，我希望将媒体文件夹中保存的图像显示在图像上传器预览中。我正在尝试在内容配置中复制类似的功能“更改前端标题徽标”。

我的用户界面表单

<argument name="data" xsi:type="array">
        <item name="js_config" xsi:type="array">
            <item name="provider" xsi:type="string">upload_form.upload_form_data_source</item>
            <item name="deps" xsi:type="string">upload_form.upload_form_data_source</item>
        </item>
        <item name="label" xsi:type="string" translate="true">Background Upload</item>
        <item name="config" xsi:type="array">
            <item name="dataScope" xsi:type="string">data</item>
            <item name="namespace" xsi:type="string">upload_form</item>
        </item>
        <item name="template" xsi:type="string">templates/form/collapsible</item>
    </argument>
    <dataSource name="upload_form_data_source">
        <argument name="dataProvider" xsi:type="configurableObject">
            <argument name="class" xsi:type="string">Vendor\CustomerLogin\Model\DataProvider</argument>
            <argument name="name" xsi:type="string">upload_form_data_source</argument>
            <argument name="primaryFieldName" xsi:type="string">id</argument>
            <argument name="requestFieldName" xsi:type="string">id</argument>
        </argument>
        <argument name="data" xsi:type="array">
            <item name="js_config" xsi:type="array">
                <item name="component" xsi:type="string">Magento_Ui/js/form/provider</item>
            </item>
        </argument>
    </dataSource>
    <fieldset name="employee_details">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="collapsible" xsi:type="boolean">true</item>
                <item name="label" xsi:type="string" translate="true">Employee Details</item>
                <item name="sortOrder" xsi:type="number">20</item>
            </item>
        </argument>
        <field name="imageUploaderExample" formElement="imageUploader">
            <settings>
                <notice translate="true">Some notice.</notice>
                <label translate="true">Image Uploader Example</label>
                <componentType>imageUploader</componentType>
            </settings>
            <formElements>
                <imageUploader>
                    <settings>
                        <allowedExtensions>jpg jpeg gif png</allowedExtensions>
                        <maxFileSize>2097152</maxFileSize>
                        <uploaderConfig>
                            <param xsi:type="string" name="url">myuploads/index/uploadimage</param>
                        </uploaderConfig>
                    </settings>
                </imageUploader>
            </formElements>
        </field>

Dataprovider.php

class DataProvider extends \Magento\Framework\View\Element\UiComponent\DataProvider\DataProvider
{
    /**
     * @param string $name
     * @param string $primaryFieldName
     * @param string $requestFieldName
     * @param array $meta
     * @param array $data
     */
    public function __construct(
        $name,
        $primaryFieldName,
        $requestFieldName,
        ReportingInterface $reporting,
        SearchCriteriaBuilder $searchCriteriaBuilder,
        RequestInterface $request,
        FilterBuilder $filterBuilder,
        array $meta = [],
        array $data = []
    ) {
        parent::__construct($name, $primaryFieldName, $requestFieldName,$reporting,$searchCriteriaBuilder,$request ,$filterBuilder,$meta, $data);
    }

    /**
     * Get data
     *
     * @return array
     */
    public function getData()
    {
        return [];
    }
}

Answer 1

为了在编辑页面中显示保存的图像，您可以在 DataProvider 方法中使用以下代码 getData 方法

/**
* Store manager
*
* @var \Magento\Store\Model\StoreManagerInterface
*/
private $storeManager;

public function __construct(
        $name,
        $primaryFieldName,
        $requestFieldName,
        ReportingInterface $reporting,
        SearchCriteriaBuilder $searchCriteriaBuilder,
        RequestInterface $request,
        FilterBuilder $filterBuilder,
        \Magento\Store\Model\StoreManagerInterface $storeManager, // add this for getting media url 
        array $meta = [],
        array $data = []
) {
    $this->storeManager = $storeManager;
    parent::__construct($name, $primaryFieldName, $requestFieldName,$reporting,$searchCriteriaBuilder,$request ,$filterBuilder,$meta, $data);
}

/**
* Get data
*
* @return array
*/
public function getData()
{
    if (isset($this->_loadedData)) {
        return $this->_loadedData;
    }
    $items = $this->collection->getItems(); // your saved table data's collection model 
    foreach ($items as $item) {

        $data = $item->getData();

        if ($item->getImagePath()) {  // check images saved path from the database.
            $image_temp[0]['name'] = $item->getImagePath();
            $image_temp[0]['url'] = $this->getMediaUrl().$item->getImagePath();
            $data['image_path'] = $image_temp;
        }

        $this->_loadedData[$item->getId()] = $data;
    }

    return $this->_loadedData;
}


public function getMediaUrl()
{
    $mediaUrl = $this->storeManager->getStore()
        ->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA).'YOUR_SAVE_DIRECTORY/SUBDIR_TO_APPEND_PATH/';
    return $mediaUrl;
}

您可以使用图片上传组件修改此代码

image_path 到 imageUploaderExample 加载保存的图像。