ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

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

2022-07-30 15:33:53  阅读:165  来源: 互联网

标签:FileUploader form oIFrameRef contentWindow UI5 iframe ._ SAP


当我们使用 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 之后,再访问就不行了:

标签:FileUploader,form,oIFrameRef,contentWindow,UI5,iframe,._,SAP
来源: https://www.cnblogs.com/sap-jerry/p/16535080.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有