SAP UI5 FileUploader 的本地文件上传技术实现分享

简介: SAP UI5 FileUploader 的本地文件上传技术实现分享

当我们使用 SAP UI5 的 FileUploader 控件,上传本地文件时,其执行逻辑的入口,就是 FileUploader.prototype.upload

首先判断该控件是否已经被 disable:

if (!this.getEnabled()) {
      return;
    }

SAP UI5 FileUploader 底层可以基于 form 的 multipart/form-data 或者 XHR 两种技术方式进行文件上传,这在下面的源代码看得很清楚。

首先使用 getDomRef 获取 fu_form,即下图这个高亮区域:

try {
      this._bUploading = true;
      if (this.getSendXHR() && window.File) {
        var aFiles = this.FUEl.files;
        if (bPreProcessFiles) {
          this._sendProcessedFilesWithXHR(aFiles);
        } else {
          this._sendFilesWithXHR(aFiles);
        }
      } else if (uploadForm) {
        // In order to do the submit, the action DOM attribute of the inner form should be accurate.
        // If there is a change in the passed to the uploadUrl property string, we must ensure that it is
        // applied in the DOM and the submit is performed after there is new rendering.
        sActionAttr = uploadForm.getAttribute("action");
        if (sActionAttr !== this.getUploadUrl()) {
          this._submitAfterRendering = true;
        } else {
          this._submitAndResetValue();
        }
      }

如果返回的对象实例不为空,说明使用 form 的方式去提交本地代码。

此时准备提交文件了:_submitAndResetValue

调用的是 HTML form 原生的 submit 方法进行提交:

服务器端返回了一个 File uploaded ok! 的字符串:

这个字符串在隐藏的 iframe 里能够看到:

访问不了 this.oIFrameRef.contentWindow.document.body.innerHTML;:


错误消息:VM1992:1 Uncaught DOMException: Blocked a frame with origin “http://localhost:8080” from accessing a cross-origin frame.


不能使用 JavaScript 访问具有不同来源的 iframe,以避免任何可能的安全风险。 对于同源策略,浏览器会阻止脚本尝试访问具有不同源的 iframe.


实际上,我根本就不能在 8080 端口的 index.html 上下文环境里,查看另一个 iframe 的任何属性,报一样的错误:

那我提前在 iframe 创建时检测:

刚刚创建出的 iframe,href 是 about:blank:

直到这个函数执行完,this.oIFrameRef.contentWindow.location.href 都是处于可访问状态:

beforeRendering 的钩子里,this.oIFrameRef.contentWindow.location.href 仍然可用,但是 afterRendering 的钩子就不行了:

这个 before 和 afterRendering 的钩子,在点击 Browse… 按钮选择本地文件的时候,会各触发一次。

选定好之后,点击 Upload 按钮,会再触发一次:

点击 upload File 之后,执行 submit 之前,都可以正常访问:this.oIFrameRef.contentWindow.location.href

post 到 3003 之后,再访问就不行了:

相关文章
|
2月前
|
前端开发 搜索推荐 开发者
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
32 0
|
2月前
|
JavaScript 前端开发 开发者
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
17 0
|
9天前
|
前端开发 测试技术 持续交付
【Flutter 前端技术开发专栏】Flutter 中的 UI 测试与自动化测试
【4月更文挑战第30天】本文探讨了 Flutter 应用中UI测试和自动化测试的重要性,包括保障质量、提高效率和增强开发信心。Flutter提供`flutter_test`库进行Widget测试,以及`flutter_driver`进行集成测试。UI测试涵盖界面布局、交互和状态变化的验证,最佳实践建议尽早引入测试、保持用例简洁,并结合手动测试。未来,随着Flutter技术发展,UI测试和自动化测试将更加完善,助力开发高质量应用。
【Flutter 前端技术开发专栏】Flutter 中的 UI 测试与自动化测试
|
9天前
|
前端开发 搜索推荐 UED
【Flutter前端技术开发专栏】Flutter中的高级UI组件应用
【4月更文挑战第30天】探索Flutter的高级UI组件,如`TabBar`、`Drawer`、`BottomSheet`,提升应用体验和美观度。使用高级组件能节省开发时间,提供内置交互逻辑和优秀视觉效果。示例代码展示了如何实现底部导航栏、侧边导航和底部弹出菜单。同时,自定义组件允许个性化设计和功能扩展,但也带来性能优化和维护挑战。参考Flutter官方文档和教程,深入学习并有效利用这些组件。
【Flutter前端技术开发专栏】Flutter中的高级UI组件应用
|
2月前
|
搜索推荐 vr&ar Android开发
移动应用开发中的UI设计趋势与技术创新
随着移动应用市场的不断扩大和用户需求的日益多样化,移动应用开发领域的UI设计也在不断演进。本文将探讨当前移动应用开发中的UI设计趋势以及涌现的技术创新,包括对安卓和iOS平台的影响,以及未来可能的发展方向。
|
2月前
|
开发者 UED
关于 SAP UI5 sap.m.Column 的 demandPopin 属性
关于 SAP UI5 sap.m.Column 的 demandPopin 属性
15 0
|
2月前
SAP ABAP ALV 的分组显示和 Subtotal 显示实现的技术步骤试读版
SAP ABAP ALV 的分组显示和 Subtotal 显示实现的技术步骤试读版
40 0
|
2月前
SAP UI5 Link 控件的使用方法介绍 - 后续学习 Fiori Elements Smart Link 的基础试读版
SAP UI5 Link 控件的使用方法介绍 - 后续学习 Fiori Elements Smart Link 的基础试读版
16 0
|
2月前
|
前端开发 JavaScript API
SAP UI5 sap.ui.require.toUrl 的作用介绍
SAP UI5 sap.ui.require.toUrl 的作用介绍
33 0
|
2月前
|
JSON 前端开发 测试技术
SAP UI5 sap.ui.core.util.MockServer.simulate 方法介绍
SAP UI5 sap.ui.core.util.MockServer.simulate 方法介绍
24 0