在UI5中不使用Gateway的Create Stream实现文件与实体一同上传

可以实现，无需依赖create_stream方法，直接借助UI5文件上传组件读取文件并嵌入到主从实体结构中，通过create_deep_entity一次性发送。具体实现如下：

• 核心思路：将文件内容转换为Base64编码字符串，作为子实体的属性值，与其他主、子实体数据一起组织成符合OData deep结构的对象，最终通过模型的create方法触发create_deep_entity请求。

• 分步实现：

  1. 读取并编码文件
     使用sap.ui.unified.FileUploader组件的change事件获取选中文件，通过FileReader将文件转为Base64字符串（注意去除"data:xxx/xxx;base64,"前缀）：

     onFileSelect: function(oEvent) {
       const oSelectedFile = oEvent.getParameter("files")[0];
       const oFileReader = new FileReader();
       oFileReader.onload = (oLoadEvent) => {
         const sBase64Content = oLoadEvent.target.result.split(",")[1];
         // 将文件信息存入模型，用于后续构建deep实体
         this.getView().getModel().setProperty("/currentFile", {
           fileName: oSelectedFile.name,
           mimeType: oSelectedFile.type,
           content: sBase64Content
         });
       };
       oFileReader.readAsDataURL(oSelectedFile);
     }
     

  2. 构建主从实体结构
     按照后端OData服务定义的主从关系，组装包含文件子实体的完整数据对象：

     const oDeepEntityPayload = {
       parentId: "P001",
       parentName: "父实体名称",
       // 其他父实体属性
       fileCollection: [
         {
           name: this.getView().getModel().getProperty("/currentFile/fileName"),
           mimeType: this.getView().getModel().getProperty("/currentFile/mimeType"),
           content: this.getView().getModel().getProperty("/currentFile/content")
         }
       ],
       otherChildEntities: [
         // 其他子实体数据结构
       ]
     };
     

  3. 发送create_deep_entity请求
     调用UI5 OData模型的create方法，指定deep: true参数触发深层创建：

     this.getView().getModel().create("/ParentEntitySet", oDeepEntityPayload, {
       deep: true,
       success: (oResponse) => {
         // 成功回调逻辑
       },
       error: (oError) => {
         // 错误处理逻辑
       }
     });
     

• 关键注意事项：

  • 后端需支持接收Base64编码的文件内容，并在create_deep_entity的实现中完成解码与文件存储逻辑。
  • Base64编码会使文件体积增加约30%，需与后端约定文件大小上限，避免请求超时或内存溢出。
  • 确保子实体的属性名称、结构与OData服务元数据完全匹配，否则会导致序列化失败。

内容的提问来源于stack exchange，提问作者Pierre Francelino