乐趣区

关于sap:不使用任何框架手写纯-JavaScript-实现上传本地文件到-ABAP-服务器

这是 Jerry 2021 年的第 69 篇文章,也是汪子熙公众号总共第 346 篇原创文章。

采纳 SAP UI5 sap.ui.unified.FileUploader 控件,联合 Gateway 框架,实现本地文件上传到 ABAP 服务器,不是一件艰难的事件。

但因为我的项目施行的客观条件限度,如果不应用 SAP UI5 和 SAP ABAP Gateway 这两个框架,又该如何实现呢?

这是最近一个敌人征询我的问题。实际上我早在 2014 年就做过相似的事件。本文介绍不应用 SAP UI5 和 SAP ABAP Gateway 框架,纯手工进行前后端编程,来实现文件上传的需要步骤。

本文提供的源代码,前端 JavaScript 代码和 后端 ABAP 服务器的文件接管代码,因为没有应用任何利用层面的框架,因而可能在 SAP 任何基于 ABAP 技术栈的 On-Premises 产品里运行。

咱们从前后端两层的实现来别离理解这个需要的实现细节。

前端实现

前端代码比较简单,只有 30 行代码。新建一个 HTML 文件,把这 30 行代码粘贴进去。

其设计思路概述成以下 7 点。须要残缺源代码的敌人,请从这个链接取得。

(1) 定义一个原生的 form 元素,应用 enctype 字段指定该表单发送到服务器的编码格局为 multipart/form-data.

(2) 该表单的数据应用 HTTP POST 办法发送到服务器。

(3) 表单里蕴含了三个 input 控件,类型别离为 email, text 和 file. 本文介绍的本地文件上传性能,就是借助第 8 行类型为 file 的 input 控件来实现的。点击第 11 行用 a 标签实现的超链接后,绑定到 a 标签的 sendForm 函数触发,进行数据发送工作。

(4) 将 form 表单里全副数据通过 DOM API document.forms.namedItem 解析进去,放入变量 oData.

(5) 第 17 行语句演示了通过代码的形式,往待发送往服务器的表单数据里,再增加新内容的办法。

(6) 该行保护了表单数据发送到 ABAP 服务器的具体地址,其 SICF 门路为 /sap/crm/file_upload.

文件上传到 ABAP 服务器后,咱们如何验证上传是否胜利,内容是否正确呢?出于验证目标,我硬编码了一个销售订单 ID 55824. 文件上传胜利后,我在 SAP CRM 零碎里,将上传的文件创建为该销售订单的一个附件。

(7) 调用原生 API XMLHttpRequest 的 send 办法,把表单数据传送到 ABAP 服务器。

关上这个 HTML 文件,如下图所示,点击超链接进行文件上传。

待上传的文本文件内容如下:

ABAP 后端实现

因为咱们不借助任何后端框架,这意味着咱们必须基于最底层的 HTTP 协定,自行解析出客户端发送过去的 multipart/form-data 格局的数据并进行解决。

首先在事物码 SICF 里,依据前端代码里的门路 sap/crm/file_upload, 新建一个同样门路的解决节点。

对于 SICF 的更多介绍,参考 Jerry 的文章:从 ABAP Netweaver 的 SICF 到 SAP Kyma 的 Lambda Function.

给这个节点创立一个解决类 ZCL_FILE_UPLOAD, 本文所有的后端解决逻辑,就编写在这个类的 HANDLE_REQUEST 内。

残缺的后端代码同样能从这个链接取得,本文不全副贴出,只介绍要点。

通过前端 form 表单三个 input 控件保护的输出值,加上前端代码中自定义的表单数据,被浏览器随机生成的 FormBoundary 所分隔。提交表单的残缺数据,可能在 Chrome 开发者工具 Network 标签页里察看到。

ZCL_FILE_UPLOAD 类的实现逻辑为,首先解析出浏览器发送过去的 FormBoundary 标识符,依据这个 Boundary,把接管到的表单数据拆分成块,而后只解决咱们感兴趣的蕴含本地文件上传的那一块。

咱们刚刚展现了在 Chrome 开发者工具里查看发往 ABAP 服务器的表单数据明细,这些数据在 ABAP 服务器端接管之后,在调试器里显示如下:

这些井号代表什么含意?应用上图高亮的下拉菜单,把 Fast Display 切换成 HTML Browser,就高深莫测了。原来这些换行符和回车换行符等控制字符,在 ABAP 调试器里的 Fast Display 视图里,对立显示为“#”号。

我真正感兴趣的上传文件的理论内容,就存储在下图所示这个 form-data 块里。

因而,我的思路就是,依据回车换行符定位到上图 ABAP 变量 LV_DATA 蕴含的 form-data 块,如果该块蕴含了 content-type:text/plain, 就阐明此块蕴含的是上传文件的理论内容,对其解析即可失去上传文件的理论内容。

这里不少老手敌人们常犯的谬误是,因为在 ABAP 调试器里察看到的回车换行符显示为“##”,因而在代码里,这些敌人也间接用单井号或者双井号进行字符串匹配,这当然无奈工作。

在 ABAP 里要进行和换行符以及回车换行符相干操作,须要应用 ABAP 工具类 CL_ABAP_CHAR_UTILITIES 定义的常量:CR_LF 和 NEWLINE:

正如我本文实现代码里的应用形式:

解析出上传的文本文件内容后,调用 SAP CRM 附件创立 API,将该文件内容作为一个附件,增加到零碎 ID 为 55824 的销售订单中去。

本例为了简化起见,只反对类型为文本 (text/plain) 的本地文件上传成销售订单 (其 BOR 类型为 BUS20000115) 的附件,故文件类型和 BOR 类型都进行了硬编码。

前后端开发实现之后,进行测试,从本地上传一个名为 upload.txt 的文本文件,ABAP 服务器接管到之后,将其存储成为销售订单 55824 的一个附件。

点击附件超链接,关上该文件内容,发现和本地文件完全一致,测试通过:

当然,本文形容的理论是一个从新造轮子的场景。大家在理论我的项目开发中,如果没有非凡起因,还是尽量采纳 SAP 提供的现成框架和工具,来实现诸如文件上传这种比拟根底和底层的工作,从而把精力放到业务逻辑的编写中去。

感激浏览。

Jerry 的 ABAP 专题

  • Jerry 的 ABAP, Java 和 JavaScript 乱炖
  • ABAP 开发人员将来应该学些什么
  • Jerry 2017 年的五一小长假:8 种经典排序算法的 ABAP 实现
  • Jerry 的 ABAP 原创技术文章合集
  • 300 行 ABAP 代码实现一个最简略的区块链原型
  • 应用 Java+SAP 云平台 +SAP Cloud Connector 调用 ABAP On-Premise 零碎里的函数
  • 在 SAP 云平台的 CloudFoundry 环境下生产 ABAP On-Premise OData 服务
  • ABAP vs Java,蛙泳 vs 自由泳
  • 聊聊 C 语言和 ABAP
  • 入手应用 ABAP Channel 开发一些小工具,晋升日常工作效率
  • 我用 ABAP 做过的那些无聊的事件
  • 不喜爱 SAP GUI?那试试用 Eclipse 进行 ABAP 开发吧
  • 应用 Visual Studio Code 编写和激活 ABAP 代码
  • 你的 ABAP 程序给佛祖开过光么?来试试 Jerry 这个小技巧
  • 在 SAP 云平台 ABAP 编程环境上编写第一段 ABAP 程序
  • SAP 官网公布的 ABAP 编程标准
  • ABAP Code Inspector 那些暗藏的性能,您都晓得吗?
  • 还在用 ABAP 进行 SAP 产品的二次开发?来理解下这种全新的二次开发理念吧
  • ABAP Netweaver 体内的那些寄生式编程语言
  • 从 SAP 社区上的一篇博客开始,聊聊 SAP 产品命名背地的那份情怀
  • 云端的 ABAP Restful 服务开发
  • 如何在 SAP 云平台 ABAP 编程环境里把 CDS view 裸露成 OData 服务
  • 应用 abapGit 在 ABAP On-Premises 零碎和 SAP 云平台 ABAP 环境之间进行代码传输
  • 30 分钟用 Restful ABAP Programming 模型开发一个反对增删改查的 Fiori 利用
  • Jerry 带您理解 Restful ABAP Programming 模型系列之二:Action 和 Validation 的实现
  • Jerry 带您理解 Restful ABAP Programming 模型系列之三:云端 ABAP 利用调试
  • SAP 云平台上的 ABAP 编程环境里如何生产第三方服务
  • ABAP 开发者上云的时候到了 – 当初大家能够收费应用 SAP 云平台 ABAP 环境的试用版了
  • 学而不思则罔 – SAP 云平台 ABAP 编程环境的由来和实用场景
  • SAP 云平台里的三叉戟利用
  • 如何基于 Restful ABAP Programming 模型开发并部署一个反对增删改查的 Fiori 利用
  • SAP 2019 TechEd Key Note 解读:云时代下 SAP 从业人员如何做二次开发?
  • 有哪些 ABAP 关键字和语法,到了 ABAP 云环境上就没方法用了?
  • ABAP 开发环境终于反对以驼峰命名法主动格式化 ABAP 变量名了
  • 利用 ABAP 740 的新关键字 REDUCE 实现一个理论工作工作
  • 一段让人瑟瑟发抖的 ABAP 代码
  • 昨日万圣节 ABAP 怪兽级代码谜团,颁布答案啦
  • 介绍一种在 ABAP 内核态进行内表高效拷贝的办法
  • 应用 SAP Cloud Application Programming 模型开发 OData 的一个理论例子
  • 当 ABAP 遇见普罗米修斯
  • 应用 ABAP 绘制可伸缩矢量图
  • ABAP 开发环境语法高亮的那些事儿
  • SAP 谬误音讯调试之七种武器:让所有的谬误音讯都能被定位
  • 应用 ABAP 操作 Excel 的几种办法
  • SAP GUI 里的收藏夹事务码管理工具
  • SAP GUI 和 Windows 注册表
  • 有了 Debug 权限就能干坏事?小心了,你的一举一动尽在系统监控中
  • ABAP CCDEF, CCIMP, CCMAC, CCAU, CMXXX 这些东东是什么鬼
  • 实现 ABAP 条件断点的三种形式
  • 应用 SAT 跟踪监控从浏览器关上的 SAP 利用的性能和调用栈
  • 一个 13 年 ABAP 老兵的倡议:理解这些基础知识,对 ABAP 开发有百利而无一害
  • SAP ABAP Netweaver 容器化, 不可能实现的工作吗?
  • SAP 产品加强技术回顾
  • SAP API 开发方法大全
  • 浅谈 Java 和 SAP ABAP 的动态代理和动静代理,以及 ABAP 面向切面编程的尝试
  • SAP ABAP 应用服务器的 HTTP 响应状态码(Status Code)
  • SAP ABAP 里存在 Java List 这种汇合工具类么?CL_OBJECT_COLLECTION 理解一下
  • ABAP 面试题系列:写一组会呈现死锁 (Deadlock) 的 ABAP 程序
  • SAP ABAP Netweaver 服务器的规范登录形式解说
  • SAP ABAP 关键字语法图和 ABAP 代码主动生成工具 Code Composer
  • SAP ABAP SM50 的另类用处 – ABAP 工作过程对数据库表读取操作的检测
  • 对于 SAP ABAP 字符变量和字符串变量字符个数的一个知识点,和一个血案
  • SAP ABAP 一组关键字 IS BOUND, IS NOT INITIAL 和 IS ASSIGNED 的用法辨析
  • SAP ABAP 和 Java 里的弱援用 (WeakReference) 和软援用(SoftReference)
  • SAP AMDP 介绍 – ABAP 托管的 HANA 数据库过程
  • 给你的 ABAP 对象打上标签(Tag)
  • 历史上的明天:编程语言中 null 援用的十亿美元谬误
  • ABAP Development Tool 代码模板和其余一些实用技巧汇总
  • SAP ABAP Development Tool 进步开发效率的十个小技巧
  • 如何在 SAP BTP 平台 ABAP 编程环境里生产基于 SOAP 的 Web Service
  • ABAP 真的会过期吗?聊聊 ABAP 的过来,当初和将来
  • 基于 abapGit 和 abaplint 的 ABAP 继续集成的一个例子

更多 Jerry 的原创文章,尽在:” 汪子熙 ”:

退出移动版