需求
在本地通过 HTML input 元素,支持上传多个文本文件到服务器。
服务器采取 Node.js 实现,将本地上传的文本文件内容打印出来。
实现效果
先看一下本文介绍的代码片段执行的效果。
本文介绍的程序,启动了一个在 3003 端口上监听的服务器。浏览器访问 localhost:3003,能看到如下界面:
点击 Choose Files,弹出文件上传对话框,可以选择上传多个本地文本文件。
这里我选择了本地两个名为 1.txt 和 2.txt 的文本文件,内容分别为:
选定之后,Choose Files 控件右边,显示为 2 files,意思是有两个本地文件等待上传。
点击上图的 upload your file 之后,在服务器的控制台,能看到依次打印出第一个文件的文件名,文件内容,然后是第二个文件的文件名,文件内容,说明上传成功:
下面是本需求具体的实现步骤。
实现步骤
本需求采取 Node.js 技术栈实现。
使用 npm init 命令行新建一个基于 npm 的 Node.js 项目,package.json 文件内容如下:
{ "name": "file.upload.test", "version": "1.0.0", "author": "Jerry", "description": "File upload test", "scripts": { "start": "ui5 serve", "build": "ui5 build" }, "devDependencies": { "express": "^4.12.4" }, "dependencies": { "multiparty": "^4.2.3" } }
从 package.json 文件的 dependencies 区域能看出,我们使用了一个叫做 multiparty 的库。
新建一个 fileUploadServer.js 文件,完整源代码只有 33 行,内容如下:
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.on('part', function(part) { console.log(part.filename); part.setEncoding('utf8'); part.on('data',function (chunk){ console.log(chunk) }); part.on('end',function (){ console.log('读取结束'); }); }); form.parse(req); } res.writeHead(200, { 'content-type': 'text/html' }); res.end( '<form action="/upload" enctype="multipart/form-data" method="post">'+ '<input type="text" name="title"><br>'+ '<input type="file" name="upload" multiple="multiple"><br>'+ '<input type="submit" value="upload your file">'+ '</form>' ); }).listen(PORT); console.log('listen on port:' + PORT);
进入 package.json 和 fileUploadServer.js 文件所在的文件夹,执行命令行 npm install,安装 package.json 文件里定义的依赖,然后命令行 node fileUploadServer.js, 就可以启动服务器了:
看到提示消息 listen on port:3003 说明服务器启动成功了,接下来按照文件前面提示的步骤进行测试即可。