客户端

实际上就是一个简略的 html 网页，源代码如下：

<html><form id="fu_form" enctype="multipart/form-data" method="post" action="http://localhost:3003/upload" style="display: inline-block;">    <input type="file" name="myFileUpload" id="fileUploader-fu" tabindex="-1" size="1" title="Upload your file to the local server">    <input type="submit" value="Submit"></form></html>

新建一个 .html 文件，把下面的源代码拷贝进去，用浏览器关上，看到如下页面。

留神此时浏览器地址栏的 url：file:///C:/Code/UI5/Walkthrough/110/sample.html

form 的 action 属性，指向硬编码的 "http://localhost:3003/upload"，因而咱们还须要编写一个服务器，监听在这个地址上，用于接管 form 上传的本地文件。

服务器端

一个采纳 Node.js 开发的利用，单纯的接管客户端上传的文件，打印出文件名和文件大小。

源代码如下：

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 内容能够参考上面的代码：

{  "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

阐明服务器曾经在监听 3003 端口，期待客户端上传文件了。

回到客户端，点击 Choose File 从本地抉择一个文件：

下图的含意是抉择了一个 1.txt 文件，点击 Submit 即可上传：

点击 Submit 之后，留神到地址栏曾经变成了：http://localhost:3003/upload

并且打印出了 File uploaded ok! 的来自服务器端的响应。

这就是咱们在客户端网页 action 里编写的服务器端接管文件上传的地址。

这个响应编写在服务器端的第 21 行代码处：