在上一篇博文中，我讨论了如何在使用Fiori元素创建的应用程序中显示列表报告列中的图像。在本博客中，我们将讨论如何上传图片。

在阅读本博客文章之前，建议阅读前一篇。

这里是前端应用程序的示例源代码。

场景：

列表中的每一篇文章记录都会在一列中有一个按钮，用户将从本地桌面/客户端系统上传图片。

是的，您可以我猜对了。操作列作为列表报表应用程序的扩展添加。有关如何添加列的详细信息，人工智能有哪些领域，请参阅此处。我们在这个博客中使用的是响应表，物联网是什么，云服务器免费，但是如果你的应用程序使用的是网格表，请参阅此处。

步骤：

右键单击项目->新建->扩展

在"模板选择"选项卡中选择"列表报表扩展"，然后选择"下一步"：

从下拉列表中选择实体集，并提供要生成的片段的名称。

选择"下一步"。

选择"完成"。

这将创建文件夹"扩展"和片段upload.fragment.xml文件内

在"ext"文件夹中创建另一个文件：uploadCell.fragment.xml文件. 请参阅SAP文档以了解正在发生的事情。

因此将创建两个片段：

a。sos.uploadimage.ext文件.view.upload.fragment文件.xml，

b。sos.uploadimage.ext文件.view.uploadCell.fragment文件.xml

Alos列表报表应用扩展后，大数据服务，清单.json文件应如下所示。

下面是示例代码。

清单.json

sos.uploadimage.ext文件.view.upload.frgament文件.xml

sos.uploadimage.ext文件.view.uploadCell.frgament视图.xml

2。我们还需要添加代码来处理控件引发的事件sap.ui.unified.FileUploader在片段中引入uploadCell.frgament.xml文件.

添加扩展控制器的快速方法是再次使用向导进行扩展，如步骤1所示，手游返利，但这次选择向导的"扩展设置"选项卡中的"操作"单选按钮。

删除"动作"部分来自清单.json因为我们并没有真正使用动作按钮功能。[请参阅github的源代码]

扩展向导还将添加另一个文件夹"controller"和"file"ListReportExt.controller.js'内。

用以下内容覆盖此文件中的代码。[参见github的源代码]

ListReportExt.controller.js

3. 函数handleValueChange：从本地设备上载文件时触发此hander。我们正在将FIleUploader控件的uploadURl属性适当地设置为导航属性，\u SOSImage，它实际上是媒体实体类型。

4。函数handleUploadComplete和handleUploadAbort分别在上传成功或失败时发出相应的消息。

5。既然前端编码已经完成，在S/4HANA或后端系统中，在方法/iwbep/if\mgw\u appl\u srv\u runtime~创建DPC\u EXT类的\u流中添加下面的代码。

如前一篇博客所述，为了简单起见，我们将图像文件存储在应用服务器目录中，但根据您自己的内容存储库调整代码。

6。通过从本地设备上传图像来测试应用程序。

结论

在这个博客系列中，我们看到了如何在用Fiori Elements list report Floorplan创建的列表报告中显示和上传每个记录的图像。