UI5与后端的文件交互（二）-编程知识

UI5与后端的文件交互（二）

文章目录

前言
一、开发Action
- 1. 创建Structure
- 2. BEDF添加Action
- 3. class中实现Action
二、修改UI5 项目
- 1. 添加一个按钮
- 2. 定义事件函数
三、测试及解析
- 1. 测试
- 2. js中提取到的excel流数据
- 3. 后端解析

前言

这系列文章详细记录在Fiori应用中如何在前端和后端之间使用文件进行交互。
这篇的主要内容有：

1.后端RAP的开发（S4HANA On-Premise）
- 开发Action
2.前端（UI5）读取Excel文件并保存到后端
- 传输文件流，并在ABAP中解析数据

一、开发Action

1. 创建Structure

用于在UI5中把文件流传输到后端

@EndUserText.label : 'File'
@AbapCatalog.enhancement.category : #NOT_EXTENSIBLE
define structure ymoon_s010 {content : abap.string(0);
}

2. BEDF添加Action

managed implementation in class zbp_moon_i_010 unique;
strict ( 2 );define behavior for ymoon_i_010 alias Student
persistent table YMOON_T010
early numbering
lock master
authorization master ( instance )
//etag master <field_name>
{create;update;delete;//Add Actionstatic action upload_file parameter ymoon_s010;}

3. class中实现Action

这里使用abap2xlsx解析excel文件

  method upload_file.types:begin of upload_type,name   type ymoon_t010-name,age    type ymoon_t010-age,gender type ymoon_t010-gender,city   type ymoon_t010-city,end of upload_type.data:ls_upload type upload_type.data:lt_ymoon_t010 type table of ymoon_t010,ls_ymoon_t010 type  ymoon_t010."获取UI5传送的parameterdata(content) = keys[ 1 ]-%param-content."拆分数据，只保留excel内容 - lv_datasplit content at `;` into data(lv_dummy) data(lv_data).split lv_data at `,` into data(lv_format) lv_data.data:lv_excel_data type xstring."将base64的String转换为xstringcall function 'SCMS_BASE64_DECODE_STR'exportinginput  = lv_dataimportingoutput = lv_excel_dataexceptionsfailed = 1others = 2."ABAP2XLSX生命data: lo_excel  type ref to zcl_excel, "엑셀lo_reader type ref to zif_excel_reader,lo_root   type ref to cx_root. "异常类data: lo_worksheet   type ref to zcl_excel_worksheet,highest_column type zexcel_cell_column,highest_row    type int4,column         type zexcel_cell_column value 1,col_str        type zexcel_cell_column_alpha,row            type int4               value 1,value          type zexcel_cell_value,converted_date type d."创建readercreate object lo_reader type zcl_excel_reader_2007.lo_excel = lo_reader->load( i_excel2007 = lv_excel_data ).lo_worksheet = lo_excel->get_active_worksheet( )."计算行列最大值highest_column = lo_worksheet->get_highest_column( ).highest_row    = lo_worksheet->get_highest_row( ).row += 1.while row <= highest_row.while column <= highest_column.col_str = zcl_excel_common=>convert_column2alpha( column )."读取cell数据lo_worksheet->get_cell(exportingip_column = col_strip_row    = rowimportingep_value = value).assign component column of structure ls_upload to field-symbol(<fs>).<fs> = value.column = column + 1.endwhile.column = 1.clear ls_ymoon_t010.move-corresponding ls_upload to ls_ymoon_t010.ls_ymoon_t010-uuid = cl_system_uuid=>create_uuid_x16_static( ).append ls_ymoon_t010 to lt_ymoon_t010.row = row + 1.endwhile.modify ymoon_t010 from table lt_ymoon_t010.endmethod.

二、修改UI5 项目

1. 添加一个按钮

点击时将触发onUploadStream事件

<Buttonid="_IDGenButton4"press="onUploadStream"icon="sap-icon://upload"text="Upload Stream"type="Success"class="sapUiSmallMarginBegin"
/>

2. 定义事件函数

这里不解析excel里的数据，只把文件流推给后端

onUploadStream:function(){var that = thisvar oModel = this.getView().getModel();var oFileUploader = this.byId("fileUploader");var filename = oFileUploader.getProperty('value')var file = oFileUploader.oFileUpload.files[0];var reader = new FileReader();reader.onload = function (evt) {// 获取base64值var vContent = evt.currentTarget.result;oModel.callFunction("/upload_file",   //BDEF中定义的action名 {method: "POST", // 使用POST urlParameters: {   //定义的参数，首字母必须要大写 "Content": vContent},success: function (odata, response) {//Model RefreshoModel.refresh(true);},error: function (res) {console.log(res)}})}//读取文件reader.readAsDataURL(file);}