如何使用 multiparty 工具库在 Node.js 应用里解析 multipart form-data 格式的请求

简介: 如何使用 multiparty 工具库在 Node.js 应用里解析 multipart form-data 格式的请求

我们使用 form 和 input 控件上传文件到服务器,服务器采取 Node.js 应用接收客户端上传的文件。可以使用 multiparty 这个库文件,解析从客户端提交的本地文件。完整的源代码如下图所示:

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') {
    // parse a file upload
    var form = new multiparty.Form();
    form.parse(req, function(err, fields, files) {
      res.writeHead(200, { 'content-type': 'text/plain' });
      res.write('received upload:\n\n');
      res.end(util.inspect({ fields: fields, files: files }));
    });
    return;
  }
  // show a file upload form
  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);

文件上传的具体实现:

使用 HTML 标准的 form 标签,action 值为 /upload, 这个值在 Node.js 应用里会再次用到。

enctypemultipart/form-data

使用 input 控件,属性指定为 file,multiple 属性为 multiple,以支持多文件上传。

一旦我在浏览器里输入 http://localhost:3003/ 之后,下列断点就触发:提示有新的客户端连接到达:

此时 createServer 里的回调函数,req 的类型为 IncomingMessage,url 字段的值为 /

此时返回一个文件上传的网页给客户端:

如下图所示:

选中两个文件后,点击 Upload your files

此时 url 变成了 form 里指定的 /upload,method 变成了 POST:

执行 form.parse 注册回调函数。注意,此时这个回调函数并不会立即执行。

稍后,当两个本地文件的数据流都完整上传到服务器之后,注册的回调函数以异步的方式被触发:

在此回调函数里,req 对象不再可用,只能访问 res(ServerResponse), error, fields, files 这种字段:

我们在 title 字段输入 Jerry 123 之后,点击 upload 按钮:

可以从 fields 字段获得 title 内容,从 files 字段获取上传的文件的文件名和尺寸,以及本地的绝对路径:

相关文章
|
1月前
|
开发框架 前端开发 JavaScript
使用JavaScript、jQuery和Bootstrap构建待办事项应用
使用JavaScript、jQuery和Bootstrap构建待办事项应用
13 0
|
1月前
|
自然语言处理 JavaScript 前端开发
探索JavaScript中的闭包:理解其原理与实际应用
探索JavaScript中的闭包:理解其原理与实际应用
19 0
|
1月前
|
JavaScript 前端开发 算法
js开发:请解释什么是虚拟DOM(virtual DOM),以及它在React中的应用。
虚拟DOM是React等前端框架的关键技术,它以轻量级JavaScript对象树形式抽象表示实际DOM。当状态改变,React不直接操作DOM,而是先构建新虚拟DOM树。通过高效diff算法比较新旧树,找到最小变更集,仅更新必要部分,提高DOM操作效率,降低性能损耗。虚拟DOM的抽象特性还支持跨平台应用,如React Native。总之,虚拟DOM优化了状态变化时的DOM更新,提升性能和用户体验。
24 0
|
20天前
|
存储 JavaScript 前端开发
Angular 应用 node_modules 子文件夹 @types 的作用介绍
Angular 应用 node_modules 子文件夹 @types 的作用介绍
12 1
|
5天前
|
JavaScript 前端开发 UED
深入解析JavaScript原生操作DOM技术
【4月更文挑战第22天】本文深入探讨JavaScript原生DOM操作技术,包括使用`getElement*`方法和CSS选择器获取元素,借助`createElement`与`appendChild`动态创建及插入元素,修改元素内容、属性和样式,以及删除元素。通过掌握这些技术,开发者能实现页面动态交互,但应注意避免过度操作DOM以优化性能和用户体验。
|
5天前
|
前端开发 JavaScript 编译器
深入解析JavaScript中的异步编程:Promises与async/await的使用与原理
【4月更文挑战第22天】本文深入解析JavaScript异步编程,重点讨论Promises和async/await。Promises用于管理异步操作,有pending、fulfilled和rejected三种状态。通过.then()和.catch()处理结果,但可能导致回调地狱。async/await是ES2017的语法糖,使异步编程更直观,类似同步代码,通过事件循环和微任务队列实现。两者各有优势,适用于不同场景,能有效提升代码可读性和维护性。
|
12天前
|
开发框架 前端开发 JavaScript
采用C#.Net +JavaScript 开发的云LIS系统源码 二级医院应用案例有演示
技术架构:Asp.NET CORE 3.1 MVC + SQLserver + Redis等 开发语言:C# 6.0、JavaScript 前端框架:JQuery、EasyUI、Bootstrap 后端框架:MVC、SQLSugar等 数 据 库:SQLserver 2012
|
1月前
|
开发框架 JavaScript 前端开发
描述JavaScript事件循环机制,并举例说明在游戏循环更新中的应用。
JavaScript的事件循环机制是单线程处理异步操作的关键,由调用栈、事件队列和Web APIs构成。调用栈执行函数,遇到异步操作时交给Web APIs,完成后回调函数进入事件队列。当调用栈空时,事件循环取队列中的任务执行。在游戏开发中,事件循环驱动游戏循环更新,包括输入处理、逻辑更新和渲染。示例代码展示了如何模拟游戏循环,实际开发中常用框架提供更高级别的抽象。
14 1
|
1月前
|
存储 安全 Linux
C++文件格式深度解析:从底层结构到关键特性
C++文件格式深度解析:从底层结构到关键特性
251 3
C++文件格式深度解析:从底层结构到关键特性
|
1月前
|
JavaScript 前端开发
HTML JS 应用
HTML JS 应用
19 3

推荐镜像

更多