使用 SAP UI5 FileUploader 控件上传本地文件试读版

最新推荐文章于 2023-06-30 21:20:21 发布
最新推荐文章于 2023-06-30 21:20:21 发布
阅读量313 收藏 1
点赞数
分类专栏： SAP UI5 JavaScript Fiori 文章标签： SAP SAP UI5 javascript ui5 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/i042416/article/details/125980423
版权
SAP UI5 同时被 3 个专栏收录
1871 篇文章 175 订阅
订阅专栏
Fiori
901 篇文章 61 订阅
订阅专栏
JavaScript
882 篇文章 32 订阅
订阅专栏

一套适合 SAP UI5 初学者循序渐进的学习教程

作者简介

Jerry Wang，2007 年从电子科技大学计算机专业硕士毕业后加入 SAP 成都研究院工作至今。Jerry 是 SAP 社区导师，SAP 中国技术大使。在长达 15 年的 SAP 标准产品开发生涯里，Jerry 曾经先后参与 SAP Business ByDesign, SAP CRM, SAP Cloud for Customer, SAP S/4HANA, SAP Commerce Cloud(电商云)等标准产品的研发工作。

Jerry 工作中使用 ABAP, Java, JavaScript 和 TypeScript 进行开发, 对包括 SAP UI5 在内的多款 SAP 自研框架有深入的研究。

教程目录

说明

Jerry 从 2014 年加入 SAP成都研究院 CRM Fiori 开发团队之后开始接触 SAP UI5，曾经在 SAP 社区和“汪子熙”微信公众号上发表过多篇关于 SAP UI5 工作原理和源码解析的文章。

在 Jerry 这篇文章 对 SAP UI5 一无所知的新手，从哪些材料开始学习比较好？ 曾经提到，Jerry 也是从 SAP UI5 菜鸟一路走过来，深知只有 ABAP 开发背景的开发者，向 SAP UI5 开发领域转型的不易，因此我在业余时间设计了这份适合 SAP UI5 不同水平的学习者的学习教程，把开发一个完整的 SAP UI5 应用的流程，拆分成若干个步骤，力求每个步骤里，把涉及到的知识点都涵盖到。

这些知识点可能不像我的 UI5 源码分析系列文章那么深入，但力求做到深入浅出，重要的知识点都配上详细的截图来辅助文字的介绍，便于教程学习者的理解。

本教程每一个步骤的源代码，都存放在我的 Github 上，分别用文件夹 01，02，03 等等来标识，例如步骤 1 的源代码在这里。

每一个步骤均是前一步骤的基础上，添加了若干新特性。建议零基础或者对 SAP UI5 知之甚少的 SAP UI5 初学者，按照顺序从第一个步骤开始循序渐进地学习，把这些代码下载到本地，配合教程的文字讲解，自己动手，以加深理解。

对于已经有一定基础的 SAP UI5 开发人员，可以通过本文的目录，跳过前面一部分比较基础的章节，直接挑选对自己工作项目有关，或者包含某些知识点自己尚未掌握的章节来有针对性地学习。

大家如果对教程的每个步骤有任何疑问，欢迎在教程对应的步骤文章里给我评论，进行留言。我虽然平时开发工作很忙，但是保证会定期查看大家给我留下的评论，对于里面涉及到的技术疑问，我一定会抽时间做出解答。

使用 SAP UI5 FileUploader 控件上传本地文件

我们可以使用 SAP UI5 提供的 FileUploader 控件，将本地文件上传到远端服务器进行存储。远端服务器负责接收上传的文件的逻辑，可以采取 Java，Node.js 或者 ABAP 等任意的编程语言实现。

本地文件上传也是最终用户同文件服务器交互的重要手段之一，因此文件上传这个主题，本教程会通过若干篇文章连续进行介绍。

笔者还另外实现了一个不通过 SAP UI5 FileUploader 控件，而是直接用 HTML 原生的 input 元素实现的文件上传场景，感兴趣的朋友可以阅读我这篇文章：使用 HTML input 元素上传本地文件，在服务器端打印出上传的内容。

先看本步骤完成后实现的场景。

点击 Browser 按钮，选定本地一个文本文件 1.txt：

这个文本文件的内容如下：

点击 Upload File，能看到一个 Upload finished! 的消息弹出框：

同时 Chrome 开发者工具 network 标签页里，能看到服务器端返回的 File uploaded ok! 的响应消息。

切换到文件服务器的命令行窗口，看到控制台上打印出的 file name: 1.txt size: 10 的消息，这就是服务器接收到 SAP UI5 FileUploader 上传的 1.txt 文件后，打印出的文件名和文件大小。

下面是本场景具体的实现步骤讲解。

汪子熙
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
h5fileuploader:用于html5文件上传
04-30
用于html5文件上传的插件 ＃＃＃＃测试 下载文件夹测试 使用npm install安装nodejs软件包 然后运行node index.js 打开浏览器，输入http://127.0.0.1:1103 #### Config < script src =' H5FileUploader.js ' &...
abap2UI5
总钻风来巡山
08-28 231
abap2UI5安装
ABAP2UI5 项目里动态创建模型的特性介绍
SAP 资深技术专家 Jerry Wang 的技术分享
06-24 747
在这种架构中，应用程序在创建视图和模型方面拥有完全的自由，但它也必须对其他一切承担全部责任。在 RAP 中，只能在运行时修改某些预定义的控制属性，而视图是在之前使用 UI 注释在 CDS 工件中定义的。最后，视图和模型的定义独立于 HTTP 服务，我们不再被迫为每个应用程序提供预定义的静态 OData 服务，就像 RAP 中的情况一样。到目前为止，我们观察到abap2UI5前端应用程序不知道特定的应用程序，就像服务器上的通用HTTP服务一样，它也不知道它正在传输的特定模型和视图。
SAP UI5 应用开发教程之一百零四 - SAP UI5 表格控件的支持复选(Multi-Select)以及如何用代码一次选中多个表格行项目
SAP 资深技术专家 Jerry Wang 的技术分享
07-01 540
Jerry Wang，2007 年从电子科技大学计算机专业硕士毕业后加入 SAP 成都研究院工作至今。Jerry 是 SAP 社区导师，SAP 中国技术大使。在长达 15 年的 SAP 标准产品开发生涯里，Jerry 曾经先后参与 SAP Business ByDesign, SAP CRM, SAP Cloud for Customer, SAP S/4HANA, SAP Commerce Cloud(电商云)等标准产品的研发工作。Jerry 工作中使用 ABAP, Java, JavaScript 和
SAPUI5教程——ABAP环境下SAP Fiori 系统搭建以及开发实践
热门推荐
天外野草技术专栏
06-23 1万+
前言近年来，SAPUI5(SAP Fiori 2.0)的普及，云时代下的移动Web应用一路高歌，众多SAP 顾问也将焦点投入到了这个前端框架。那么作为一款和SAP 系列套件深度结合的框架，需要安装很多组件支持Fiori的系列开发，可能我们并不会去做SAP Basic的相关工作，但是作为一名合格的咨询顾问，需要了解它的原理。整体架构一个Fiori的安装过程中包含了前端服务组件和后台服务数据，前端组件和
SAP UI5 sap.ui.Device.media.RANGESETS.SAP_STANDARD_EXTENDED 介绍
SAP 资深技术专家 Jerry Wang 的技术分享
09-27 268
这是一个 4 步范围集（Phone, Tablet, Desktop, LargeDesktop）。自动将一个 CSS 类添加到页面根（html 标记），指示当前屏幕宽度范围：sapUiMedia-StdExt-NAME_OF_THE_INTERVAL。下面是一个例子：[图片]设备和功能检测 API：提供有关使用的浏览器/设备的信息，以及对某些事件（如媒体查询、方向更改或调整大小）的跨平台支持。此 API 独立于 UI5 框架的任何其他部分。
使用HTML5实现多文件上传
01-31
在不支持HTML5的浏览器中，该控件可以自动切换到使用Flash或者iframe。Fileinput之所以叫fileinput是因为它是一个标准的input元素，且其type属性被设置为"file"。很多年以来，file input一次只能选择并上传单个文件...
使用fileuploader.js实现文件上传
04-05
NULL 博文链接：https://chenwes.iteye.com/blog/1525161
fileUploader:使用 formidable 上传文件的例子
06-10
使用强大的上传文件的示例服务器。 ##终点###/上传POST 使用POST方法和multipart/form-data内容类型将文件上传到此端点响应包含文件 url 的 json 对象。 例如{ " url " : " ...
比较6的html5文件上传控件
05-03
比较好用的基于html5的文件上传控件，界面美观，代码量少。
ABAP, UI5和webpack的处理入口
SAP 资深技术专家 Jerry Wang 的技术分享
03-03 423
ABAP 最先执行的是INITIALIZATION: UI5 如果一个UI5应用配置到portal的Fiori Launchpad里,那么应用的入口是Component.js 另一种方式(多用于平时的测试，验证目的）不需要launchpad，只需要在一个standalone的html里自己新建一个component的运行环境(Shell): 见下面html代码的第28到31行： webpack...
使用纯 ABAP 开发 SAP UI5 应用(一)：abap2UI5 开发环境搭建介绍
SAP 资深技术专家 Jerry Wang 的技术分享
06-30 656
我从 SAP 社区博客上了解到一个开源项目，名叫 abap2UI5, 作者是 Oblomov Dev，这是 Github 项目地址：这个项目最吸引 ABAP 开发人员之处在于：传统的 ABAP 搞定一切：仅仅依靠最基础的传统 ABAP 编程语言，就可以开发并运行 SAP UI5 应用。不需要学习 JavaScript 和 CDS view 等开发技术。通过 abap2UI5 生成的 SAP UI5 应用，运行时不需要 BSP，CDS，BOPF 或者 RAP 这些框架的支持。
Fiori学习笔记 - 调试工具
Carawangc的博客
10-12 1318
本文记录了两种基于Chrome的项目调试方式： Chrome打开项目， shift+ctrl+alt+s 打开SAPUI5诊断工具Eclipse开发debug加载的是本地的库，速度相对较快 Web ide的话加载速度就比较慢了 UI5 Inspector链接：https://chrome.google.com/webstore/search/UI5?hl=enInformation%20publis
133. SAP UI5 应用元数据文件 manifest.json 的加载和解析原理讲解
SAP 资深技术专家 Jerry Wang 的技术分享
09-22 731
本文介绍了 SAP UI5 应用的元数据描述文件 manifest.json，在运行时是如何被 SAP UI5 框架加载和解析的。我们再次使用了本教程前续步骤已经多次介绍过的 SAP UI5 应用单步调试 + Chrome 开发者工具 Sources 和 network 标签页结合使用方式，来自行搞清楚框架加载和解析 manifest.json 文件的细节。
SAP fiori文件上传
Taking's Blog
06-16 708
前端 编写Upload.view.xml <mvc:View controllerName="sap.ui.taking.controller.Upload" xmlns:l="sap.ui.layout" xmlns:u="sap.ui.unified" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"> <l:VerticalLayout> <u:FileUploader id="fileUploader"
131. SAP UI5 Cross Application Navigation (跨应用间跳转)的本地模拟实现
SAP 资深技术专家 Jerry Wang 的技术分享
09-16 522
SAP UI5 Cross Application Navigation 是一种需要在 Fiori Launchpad 环境下，借助 Unified Shell Service 提供的跨应用跳转服务才能正常工作的业务场景。 本文介绍了如何在 SAP UI5 本地运行环境下，通过自行创建 Mock 服务并覆写 SAP UI5 Cross Application Navigation 服务的 getService 方法的实现方式，达到在本地仍然能以模拟运行的方式，进行跨应用间跳转场景的使用目的。
Elasticsearch-聚合（Aggregations）
七路灯
04-26 497
Elasticsearch聚合速查表，介绍指标聚合、桶分聚合、管道聚合的分类和聚合示例。 基于7.11版本。 目录聚合分类BucketMetricPipeline示例 聚合将数据汇总为指标, 统计, 或其他分析。 聚合分类 Metric：指标聚合，从文档字段值中计算指标，如总和、平均值等 Bucket：桶分聚合，根据字段值、范围或其他条件将文档分组为桶 Pipeline：管道聚合，从其他的聚合结果作为输入 Bucket Adjacency matrix：邻接矩阵，获取矩阵每个组的计数 Auto-i.
SAP UI5 component container initialized in index html
SAP 资深技术专家 Jerry Wang 的技术分享
10-20 404
Created by Wang, Jerry, last modified on Mar 23, 2015 Header and Bootstrap In the header, we have the HTML5 document type declaration, and a couple of meta tags. One that instructs Internet Explorer ...
如何通过Fiori后台调试的方式找到gateway系统的ID
SAP 资深技术专家 Jerry Wang 的技术分享
05-21 558
如果只知道后台系统的ID，需要知道到底是哪个gateway系统发起的RFC调用，可在debugger里查看如下变量： ![clipboard1](https://user-images.githubusercontent.com/5669954/57977682-1f150180-7a30-11e9-875e-a5764f0a7c73.png) answer: GM6 ![clipboa...
sapui5读入excel
最新发布
09-04
SAPUI5是一种用于构建现代Web应用程序的UI开发框架，它提供了许多功能丰富的控件和工具。要在SAPUI5中读取Excel文件，可以使用JavaScript库，如ExcelJS或xlsx。 首先，需要引入所选JavaScript库的相关资源文件。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

汪子熙

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值