當我們使用 SAP UI5 的 FileUploader 控制元件，上傳本地檔案時，其執行邏輯的入口，就是 `FileUploader.prototype.upload`：

![](https://img-blog.csdnimg.cn/img_convert/ac0eef4e3b1780145d2e0c02648ef73c.png)

首先判斷該控制元件是否已經被 disable：
```javascript
if (!this.getEnabled()) {
			return;
		}
```

SAP UI5 FileUploader 底層可以基於 form 的 multipart/form-data 或者 XHR 兩種技術方式進行檔案上傳，這在下面的原始碼看得很清楚。

![](https://img-blog.csdnimg.cn/img_convert/5e29c3d52f877c32537fc3813ea552c4.png)

首先使用 `getDomRef` 獲取 `fu_form`，即下圖這個高亮區域：
![](https://img-blog.csdnimg.cn/img_convert/aab08202cc674e74d6272928344af96e.png)

```javascript
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`
![](https://img-blog.csdnimg.cn/img_convert/293ca6fd9287ba75345577159ad85230.png)

呼叫的是 HTML form 原生的 submit 方法進行提交：
![](https://img-blog.csdnimg.cn/img_convert/d07c99b38c449717c076cc3b39b19270.png)

伺服器端返回了一個 `File uploaded ok!` 的字串：

![](https://img-blog.csdnimg.cn/img_convert/ebd508eca9a09e3648ef78c9b28f939b.png)

這個字串在隱藏的 iframe 裡能夠看到：
![](https://img-blog.csdnimg.cn/img_convert/072a4a7b1de04f530cdf02870c2907ce.png)

訪問不了 `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 的任何屬性，報一樣的錯誤：
![](https://img-blog.csdnimg.cn/img_convert/6e4da73580d5e192c8d21c7d4965427d.png)

那我提前在 iframe 建立時檢測：

![](https://img-blog.csdnimg.cn/img_convert/5160aa9b25fddec27500fd8b5df9a080.png)

剛剛建立出的 iframe，href 是 about:blank:

![](https://img-blog.csdnimg.cn/img_convert/18df20a7c6d9fa8350d7c154f5f80eee.png)

直到這個函式執行完，`this.oIFrameRef.contentWindow.location.href` 都是處於可訪問狀態：
![](https://img-blog.csdnimg.cn/img_convert/82450a6e49fed7a3bf6842f9cdeb6d80.png)

beforeRendering 的鉤子裡，`this.oIFrameRef.contentWindow.location.href` 仍然可用，但是 afterRendering 的鉤子就不行了：

![](https://img-blog.csdnimg.cn/img_convert/dd2ecc2ec1a3379119e56f9c5c2de71c.png)

這個 before 和 afterRendering 的鉤子，在點選 Browse... 按鈕選擇本地檔案的時候，會各觸發一次。

選定好之後，點選 Upload 按鈕，會再觸發一次：
![](https://img-blog.csdnimg.cn/img_convert/210a915802ec5451ed89442fc78ddf33.png)

點選 upload File 之後，執行 submit 之前，都可以正常訪問：this.oIFrameRef.contentWindow.location.href
![](https://img-blog.csdnimg.cn/img_convert/114a0741dca36329fe101a15ff5bbfe4.png)

post 到 3003 之後，再訪問就不行了：
![](https://img-blog.csdnimg.cn/img_convert/275510fc45ea64d974ad9fa98feb1ee8.png)

SAP UI5 FileUploader 的本地檔案上傳技術實現分享

相關文章