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

Question

嗨，伙计们，我正在使用magento 2图像上传器上传客户登录的徽标和背景。 上传器工作正常，并将图像保存在媒体文件夹中。问题是当我进入上传器页面(admin)时，我希望媒体文件夹中保存的图像显示在图像上传器预览中。我正在尝试在内容配置中复制类似的功能"更改前端标题徽标"。

我的用户界面表单

<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">VendorCustomerLoginModelDataProvider</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>

数据提供者.php

class DataProvider extends MagentoFrameworkViewElementUiComponentDataProviderDataProvider
{
/**
* @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

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

/**
* Store manager
*
* @var MagentoStoreModelStoreManagerInterface
*/
private $storeManager;
public function __construct(
$name,
$primaryFieldName,
$requestFieldName,
ReportingInterface $reporting,
SearchCriteriaBuilder $searchCriteriaBuilder,
RequestInterface $request,
FilterBuilder $filterBuilder,
MagentoStoreModelStoreManagerInterface $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(MagentoFrameworkUrlInterface::URL_TYPE_MEDIA).'YOUR_SAVE_DIRECTORY/SUBDIR_TO_APPEND_PATH/';
return $mediaUrl;
}

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

image_path到imageUploaderExample以加载保存的图像。