客户端其实就是一个简单的html网页,源码如下:创建一个新的一个。将上面的源代码复制到html文件中,用浏览器打开,可以看到如下页面。注意此时浏览器地址栏中的url:file:///C:/Code/UI5/Walkthrough/110/sample.htmlform的action属性指向硬编码的"http://localhost:3003/upload”,所以我们还需要写一个服务器监听这个地址来接收表单上传的本地文件。在服务端用Node.js开发的一个应用程序,只是简单的接收客户端上传的文件,并打印出文件名和文件大小。源码如下:varmultiparty=require('multiparty');varhttp=require('http');//varutil=require('util');constPORT=3003;http.createServer(function(req,res){if(req.url==='/upload'&&req.method==='POST'){varform=newmultiparty.Form();form.parse(req,function(err,fields),files){varaResult=[];varaUploaded=files.myFileUpload;for(vari=0;i文件上传成功!
");});return;}}).listen(PORT);console.log('listenon端口:'+端口);新建一个ui5FileServer.js文件,将上面的源代码粘贴进去。使用方法执行命令行npminit初始化一个npm项目,然后把上面的ui5FileServer.js文件粘贴进去。package.json的内容可以参考如下代码:{"name":"sap.m.tutorial.walkthrough.109","version":"1.0.0","author":"SAPSE","description":"SAPUI5本地文件上传最简单的例子","scripts":{"start":"ui5serve","build":"ui5build"},"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项目中,执行npminstall安装依赖,然后启动节点为ui5FileServer.js的服务器,可以看到如下输出:listenonport:3003表示服务器已经在监听3003端口,等待客户端上传文件。回到客户端,点击ChooseFile在本地选择一个文件:下图的意思是选择一个1.txt文件,点击Submit上传:点击Submit后,注意地址栏变成了:http://localhost:3003/upload并打印出服务器的响应,文件已上传ok!这是我们在客户端网页action中写的地址,用于在服务器端接收文件上传。此响应写在服务器端的第21行: