# 客戶端

實際上就是一個簡單的 html 網頁，原始碼如下：

```html

```

新建一個 .html 檔案，把上面的原始碼複製進去，用瀏覽器開啟，看到如下頁面。

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

注意此時瀏覽器位址列的 url：file:///C:/Code/UI5/Walkthrough/110/sample.html

form 的 action 屬性，指向硬編碼的 "http://localhost:3003/upload"，因此我們還需要編寫一個伺服器，監聽在這個地址上，用於接收 form 上傳的本地檔案。

# 伺服器端

一個採用 Node.js 開發的應用，單純的接收客戶端上傳的檔案，列印出檔名和檔案大小。

原始碼如下：

```javascript
var multiparty = require('multiparty');
var http = require('http');
//var util = require('util');
const PORT = 3003;

http.createServer(function(req, res) {
  if (req.url === '/upload' && req.method === 'POST') {
    var form = new multiparty.Form();

form.parse(req, function(err, fields, files) {
      var aResult = [];
      var aUploaded = files.myFileUpload;
      for( var i = 0; i < aUploaded.length; i++){
        console.log('file name: ', aUploaded[i].originalFilename, 'size: ' , aUploaded[i].size);
        aResult.push({
          name: aUploaded[i].originalFilename,
          size:aUploaded[i].size
        });
      }
      res.writeHead(200, { 'content-type': 'text/html' });
      res.end("<p>File uploaded ok!</p>");
    });
    return;
  }
}).listen(PORT);

console.log('listen on port:' + PORT);
```

新建一個 ui5FileServer.js 檔案，將上面的原始碼，貼上進去。

# 使用方法

執行命令列 npm init 初始化一個 npm 專案，然後將上述  ui5FileServer.js 檔案貼上進去。

package.json 內容可以參考下面的程式碼：

```json
{
  "name": "sap.m.tutorial.walkthrough.109",
  "version": "1.0.0",
  "author": "SAP SE",
  "description": "最簡單的 SAP UI5 本地檔案上傳的例子",
  "scripts": {
    "start": "ui5 serve",
    "build": "ui5 build"
  },
  "devDependencies": {
    "@ui5/cli": "^2.0.0",
    "express": "^4.12.4",
    "http-proxy": "latest"
  },
  "dependencies": {
    "multer": "^1.4.5-lts.1",
    "multiparty": "^4.2.3"
  }
}

```

在 npm 專案裡，執行 npm install 安裝依賴，然後用 `node ui5FileServer.js` 啟動伺服器，能看到下列輸出：listen on port:3003

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

說明伺服器已經在監聽 3003 埠，等待客戶端上傳檔案了。

回到客戶端，點選 Choose File 從本地選擇一個檔案：

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

下圖的含義是選擇了一個 1.txt 檔案，點選 Submit 即可上傳：

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

點選 Submit 之後，注意到位址列已經變成了：http://localhost:3003/upload

並且列印出了 File uploaded ok! 的來自伺服器端的響應。

這就是我們在客戶端網頁 action 裡編寫的伺服器端接收檔案上傳的地址。

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

這個響應編寫在伺服器端的第 21 行程式碼處：

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

一個端到端的基於 form 表單的檔案上傳程式，包含客戶端和伺服器端

相關文章