- 微信
- 微博
  
  分享文章到微博
- 复制链接
  
  复制链接到剪贴板

一个端到端的基于 form 表单的文件上传程序，包含客户端和服务器端

汪子熙发表于 2022/12/19 10:01:43 2022/12/19

【摘要】客户端实际上就是一个简单的 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="m...

客户端

实际上就是一个简单的 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"
  }
}