nodejs-http 对form表单上传文件数据的解析过程

最新推荐文章于 2024-06-16 09:49:39 发布
最新推荐文章于 2024-06-16 09:49:39 发布
阅读量1.2w 收藏 9
点赞数 2
分类专栏： nodejs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bugall/article/details/44873651
版权

前几天碰到了一个需求，允许接收前端用户上传的文件。
当时为了解决问题索性就上github搜了下，找了一个基于nodejs的开发插件。
后来功能实现后觉得意犹未尽，于是自己想试试去写一个类似功能的插件，方便以后拓展，然后就这么开始了。
先来说说应用层的http，数据从前端是怎么被它包装然后传到服务器的。
我们可以在浏览器中查看我们发一个请求的时候包什么格式的，例如我们访问百度时得到的请求包内容：

Remote Address:180.97.33.107:443
Request URL:https://www.baidu.com/
Request Method:GET
Status Code:200 OK
Request Headers
:host:www.baidu.com
:method:GET
:path:/
:scheme:https
:version:HTTP/1.1
accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
accept-encoding:gzip, deflate, sdch
accept-language:zh-CN,zh;q=0.8,en;q=0.6
cookie:BAIDUPSID=9193988659A757F51540F21C3A7DF43B; locale=zh;
referer:http://baidu.com/
user-agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.115 Safari/537.36
Response Headers
bdpagetype:2
bdqid:0x9ca30ab3000c253d
bduserid:1618160418
cache-control:private
content-encoding:gzip
content-type:text/html
date:Sat, 04 Apr 2015 07:42:42 GMT
expires:Sat, 04 Apr 2015 07:42:42 GMT
server:bfe/1.0.8.1
set-cookie:BDSVRTM=124; path=/
set-cookie:BD_HOME=1; path=/
set-cookie:H_PS_PSSID=11193_1450_13074_10901_12867_13322_12691_13348_12723_12797_12737_13355_13324_13210_13162_13257_13031_8498; path=/; domain=.baidu.com
set-cookie:__bsi=18001627764121693250_31_38_R_N_124_0303_C02F_Y_I_I; expires=Sat, 04-Apr-15 07:42:47 GMT; domain=www.baidu.com; path=/
status:200 OK
version:HTTP/1.1

相同的，服务器在接收到前端发来的请求时，经过一些逻辑处理，也会对前端发送一个数据包，包头格式如下：

bdpagetype:2
bdqid:0x9ca30ab3000c253d
bduserid:1618160418
cache-control:private
content-encoding:gzip
content-type:text/html
date:Sat, 04 Apr 2015 07:42:42 GMT
expires:Sat, 04 Apr 2015 07:42:42 GMT
server:bfe/1.0.8.1
set-cookie:BDSVRTM=124; path=/
set-cookie:BD_HOME=1; path=/
set-cookie:H_PS_PSSID=11193_1450_13074_10901_12867_13322_12691_13348_12723_12797_12737_13355_13324_13210_13162_13257_13031_8498; path=/; domain=.baidu.com
set-cookie:__bsi=18001627764121693250_31_38_R_N_124_0303_C02F_Y_I_I; expires=Sat, 04-Apr-15 07:42:47 GMT; domain=www.baidu.com; path=/
status:200 OK
version:HTTP/1.1

那么数据包的核心就是服务器返回给客户端的内容，也就是包体，一般情况下，我们在写代码与客户端交互式不会去单独处理包头的内容(由http底层处理，淡然也可以人工干涉)，我们只关心返回给前端什么样的数据也就是包体。
这里写图片描述

下面我们直接说说常用的post方法，如果你写过一点PHP，那么你肯定记得，在PHP里面，进行文件上传的时候，我们可以直接使用全局变量 $_FILE[‘name’ ]来获取已经被临时存储的文件信息。

但是实际上，POST数据实体，会根据数据量的大小进行分包传送，然后再从这些数据包里面分析出哪些是文件的元数据，那些是文件本身的数据。

PHP是底层做了封装，但是在nodejs里面，这个看似常见的功能却是需要自己来实现的。这篇文章主要就是介绍如何使用nodejs来解析post数据。

简单的说就是我们通过nodejs的http模块得到的文件上传数据是一个半成品，我们需要对数据进行拆分，找到那些是包头，哪些是包体。如果对接收到的数据直接进行拼接，那么结果就变成了这样子。
这里写图片描述
包头，包体都在一起。

关于content-type

  • get请求的headers中没有content-type这个字段post 的 content-type 有两种
    • application/x-www-form-urlencoded
      这种就是一般的文本表单用post传地数据，只要将得到的data用querystring解析下就可以了
    • multipart/form-data
      文件表单的传输，也是本文介绍的重点

获取POST数据
前面已经说过，post数据的传输是可能分包的，因此必然是异步的。post数据的接受过程如下：

var postData = '';
request.addListener("data", function(postDataChunk) {  // 有新的数据包到达就执行
  postData += postDataChunk;
  console.log("Received POST data chunk '"+
  postDataChunk + "'.");
});

request.addListener("end", function() {  // 数据传输完毕
  console.log('post data finish receiving: ' + postData );
});

注意，对于非文件post数据，上面以字符串接收是没问题的，但其实 postDataChunk 是一个 buffer 类型数据，在遇到二进制时，这样的接受方式存在问题。

POST数据的解析（multipart/form-data）
在解析POST数据之前，先介绍一下post数据的格式：

multipart/form-data类型的post数据
例如我们有表单如下

<FORM action="http://server.com/cgi/handle"
       enctype="multipart/form-data"
       method="post">
   <P>
   What is your name? <INPUT type="text" name="submit-name"><BR>
   What files are you sending? <INPUT type="file" name="files"><BR>
   <INPUT type="submit" value="Send"> <INPUT type="reset">
 </FORM>

若用户在text字段中输入‘Neekey’，并且在file字段中选择文件‘text.txt’,那么服务器端收到的post数据如下：

   --AaB03x
   Content-Disposition: form-data; name="submit-name"

   Neekey
   --AaB03x
   Content-Disposition: form-data; name="files"; filename="file1.txt"
   Content-Type: text/plain

   ... contents of file1.txt ...
   --AaB03x--
若file字段为空：

   --AaB03x
   Content-Disposition: form-data; name="submit-name"

   Neekey
   --AaB03x
   Content-Disposition: form-data; name="files"; filename=""
   Content-Type: text/plain

   --AaB03x--

若将file 的 input修改为可以多个文件一起上传：

<FORM action="http://server.com/cgi/handle"
       enctype="multipart/form-data"
       method="post">
   <P>
   What is your name? <INPUT type="text" name="submit-name"><BR>
   What files are you sending? <INPUT type="file" name="files" multiple="multiple"><BR>
   <INPUT type="submit" value="Send"> <INPUT type="reset">
 </FORM>

那么在text中输入‘Neekey’,并在file字段中选中两个文件’a.jpg’和’b.jpg’后：

   --AaB03x
   Content-Disposition: form-data; name="submit-name"

   Neekey
   --AaB03x
   Content-Disposition: form-data; name="files"; filename="a.jpg"
   Content-Type: image/jpeg

   /* data of a.jpg */
   --AaB03x
   Content-Disposition: form-data; name="files"; filename="b.jpg"
   Content-Type: image/jpeg

   /* data of b.jpg */
   --AaB03x--// 可以发现 两个文件数据部分，他们的name值是一样的

数据规则

简单总结下post数据的规则

1.不同字段数据之间以边界字符串分隔：

 --boundary\r\n // 注意，如上面的headers的例子，分割字符串应该是 ------WebKitFormBoundaryuP1WvwP2LyvHpNCi\r\n

2.每一行数据用”CR LF”（\r\n)分隔
3.数据以 边界分割符 后面加上 –结尾，如：

------WebKitFormBoundaryuP1WvwP2LyvHpNCi--\r\n

4.每个字段数据的header信息（content-disposition/content-type）和字段数据以一个空行分隔：\r\n\r\n

关于form具体的内容可以看下W3C的文档：W3C

If the user selected a second (image) file "file2.gif", the user agent might construct the parts as follows:

   Content-Type: multipart/form-data; boundary=AaB03x

   --AaB03x
   Content-Disposition: form-data; name="submit-name"

   Larry
   --AaB03x
   Content-Disposition: form-data; name="files"
   Content-Type: multipart/mixed; boundary=BbC04y

   --BbC04y
   Content-Disposition: file; filename="file1.txt"
   Content-Type: text/plain

   ... contents of file1.txt ...
   --BbC04y
   Content-Disposition: file; filename="file2.gif"
   Content-Type: image/gif
   Content-Transfer-Encoding: binary

   ...contents of file2.gif...
   --BbC04y--
   --AaB03x--

数据解析基本思路

必须使用buffer来进行post数据的解析
利用文章一开始的方法（data += chunk， data为字符串 ），可以利用字符串的操作，轻易地解析出各自端的信息，但是这样有两个问题：
文件的写入需要buffer类型的数据
二进制buffer转化为string，并做字符串操作后，起索引和字符串是不一致的（若原始数据就是字符串，一致），因此是先将不总的buffer数据的toString()复制给一个字符串，再利用字符串解析出个数据的start，end位置这样的方案也是不可取的。
利用边界字符串来分割各字段数据
每个字段数据中，使用空行（\r\n\r\n)来分割字段信息和字段数据
所有的数据都是以\r\n分割
利用上面的方法，我们以某种方式确定了数据在buffer中的start和end，利用buffer.splice( start, end ) 便可以进行文件写入了.

其实github上有一个很不错的开源插件，有兴趣可以去看一下:node-formidable

bugall
关注
  • 2
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
node-formidable源码：原生javascript解析前端传输的FormData
zyh_haha的博客
09-29 1016
本系列文章是本人学习相关知识时所积累的笔记，以记录自己的学习历程，也为了方便回顾知识；故文章内容较为随意简练，抱着学习目的来的同学务必转移他处，以免我误人子弟~ 在Koa和Express中，已经通过node-formidable模块替我们解析好了formdata数据，并分别将文件和表单字段（排除文件）存放在ctx.request.files和ctx.request.body对象内。 通过阅读学...
node.js实现formdata上传文件
weixin_33766805的博客
01-20 4192
node.js实现formdata上传文件 1.关于formdata XMLHttpRequest Level 2 添加了一个新的接口——FormData。利用 FormData 对象，我们可以通过 JavaScript 用一些键值对来模拟一系列表单控件，我们还可以使用 XMLHttpRequest 的 send() 方法来异步的提交表单...
NodeJS的上下文对象
xuqiaobo的博客
09-07 2204
在JS中，上下文对象就是this指针，即被调用函数所处的环境。上下文对象的作用实在一个函数内部引用调用它的对象本身，JS的任何函数都是被某个对象调用的，包括全局对象...
** 推荐开源项目：FormData（Node.js 版）**
最新发布
gitblog_00048的博客
06-16 249
???? 推荐开源项目：FormData（Node.js 版） 项目地址:https://gitcode.com/octet-stream/form-data 项目介绍 FormData是专为Node.js打造的一款遵循规范的FormData接口实现库。这个强大的工具包完全符合W3C标准，支持在Node.js环境中构建多部分表单数据，并能处理包括Blob和File在内的各种数据类型。 项目技术分析 核心...
开发nodejs服务器-服务器接受form标签上传的数据
kjprime的博客
06-04 586
用nodejs搭建服务器 安装nodejs ，搭建nodejs环境 自己新建一个文件夹node_form，用于存放此处实验的代码；此文件里面新建index.js文件；并且在此文件夹中打开命令行，输入以下命令，初始化项目。 npm init -y 在index.js写入以下代码 var http = require('http') //引入nodejs中http模块 var fs = require('fs') //引入nodejs中fs模块 也就是文件模块 var url = require(
nodejs提交form表单并将提交信息显示在页面上
我们都在成长
04-02 3797
1.打开webstorm，新建project，新建index.js。 2.输入地址localhost：1337/  出现结果如下： 3.输入username和password，点击提交结果如下图：   index.js代码如下： var http = require("http"); var server = http.createServer();
nodejs改变上下文
qq_20367813的博客
09-17 1632
nodejs上下文通过call方法
NodeJs form-data格式传输文件的方法
10-18
在Node.js环境中，进行文件上传通常涉及到`form-data`格式，这是HTTP协议中用于处理多部分数据（如文件上传）的一种标准格式。本篇文章将详细解释如何使用Node.js处理`form-data`格式的文件上传，特别是结合Koa框架...
q-a-17-nodejs-email-plus-fetch-from-form
05-28
在本项目"q-a-17-nodejs-email-plus-fetch-from-form"中，我们主要探讨了如何使用Node.js处理HTML表单提交的电子邮件数据，并利用fetch API进行数据获取。以下是相关知识点的详细说明： 1. **Node.js**：Node.js是...
nodejs-file-transfer
05-23
`multer`可以解析`multipart/form-data`编码的表单数据，包括文件上传。 6. **文件存储策略**： 文件上传后，需要决定如何存储。可以将文件保存在本地文件系统，或者使用云存储服务如Amazon S3或Google Cloud ...
html-nodejs-mysql-example：如何将HTML表单数据保存到MySQL数据库的简单示例
02-10
在本项目"html-nodejs-mysql-example"中，我们将探讨如何使用Node.js、Express框架以及MySQL数据库来处理HTML表单提交的数据。这是一个基础但实用的示例，对于初学者理解Web开发中的数据交互流程非常有帮助。以下是...
nodejs body-parser 解析post数据实例
10-19
- `reviver`：在JSON解析过程中调用的函数，用于转换解析结果。 - `strict`：仅在`bodyParser.json()`中使用，控制是否只接受数组和对象作为JSON格式。 - `type`：定义中间件处理的媒体类型，可以是函数、字符串...
node请求php文件上传,nodejs-http 对form表单上传文件数据的解析过程
weixin_33417703的博客
03-18 358
前几天碰到了一个需求，允许接收前端用户上传的文件。当时为了解决问题索性就上github搜了下，找了一个基于nodejs的开发插件。后来功能实现后觉得意犹未尽，于是自己想试试去写一个类似功能的插件，方便以后拓展，然后就这么开始了。先来说说应用层的http，数据从前端是怎么被它包装然后传到服务器的。我们可以在浏览器中查看我们发一个请求的时候包什么格式的，例如我们访问百度时得到的请求包内容：Remote...
html提交表单 node,Nodejs之http的表单提交
weixin_42150360的博客
06-23 304
之前介绍了http模块的请求与响应的过程，也介绍了TCP协议的客户端与服务端的数据传输，http协议是TCP上层协议。这里创建了一个简单的web服务器，并对提交表单数据进行处理，根据了不起的Node.js一书总结。POST方法提交表单数据之前也总结过，向服务器提交数据需要使用POST方法，GET方法的请求信息都在查询字符串中，没有请求体，而POST方法的传输的数据都在请求体中，故提交表单数据时需要...
nodejs接收form-data数据
zhoumuyu_yu的博客
03-24 4651
nodejs发送form-data数据
请问如何用nodejs通过post发送multipart/form-data类型的http请求？
热门推荐
一名普通码农的菜地
04-20 1万+
请问如何用nodejs通过post发送multipart/form-data类型的http请求？  发布于 4 年前  作者 xuhaijinsky2008  24777 次浏览 请问如果用nodejs通过post发送multipart/form-data类型的http请求？ 网络上搜索的都是解析multipart/form-data表单的，express已经提供
前端通过FormData上传文件/图片到后端，前后端nodejs解析
莉亚小屋
11-12 2807
最近需要实现将图片从前端上传到后端，了解到了FormData类。使用过程中遇到了不少问题，都在此记录一下。 FormData 首先，对formdata的使用详见这篇文章 https://segmentfault.com/a/1190000006716454 ajax上传数据 很多博文中用的方法如下 ...
NodeJS中http模块开发
nanxing的博客
09-27 157
NodeJS中http模块开发web服务器初体验request对象method的处理url的处理GET请求处理POST请求处理headers的处理response对象返回响应结果返回状态码响应头文件 web服务器初体验 两种创建方式 const http = require("http"); // 创建方式一 http.createServer const server1 = http.createServer((request, response) => { response.end("hell
3.8 node处理formData请求
LetsStudy的博客
12-01 3020
一、工作中需要发送formData请求，循环发送某个目录下的所有文件，再通过其他接口获取结果，所以先要提取文件 //parse_file.js const fs = require('fs'); const path = require('path'); var temp = [] exports.parse_file = function parse_file(dir_path) { let p = path.join(dir_path); let stat =
script登录表单，数据传向nodejs
04-07
以下是一个简单的登录表单，使用HTML和JavaScript来收集用户输入的数据，然后将数据传递给Node.js服务器。 HTML代码： ```html <!DOCTYPE html> <html> <head> <title>Login Form</title> </head> <body> <form id="loginForm"> <label for="username">Username:</label> <input type="text" id="username" name="username" required><br><br> <label for="password">Password:</label> <input type="password" id="password" name="password" required><br><br> <button type="submit">Login</button> </form> <script> const form = document.getElementById('loginForm'); form.addEventListener('submit', async (event) => { event.preventDefault(); const username = document.getElementById('username').value; const password = document.getElementById('password').value; const data = { username, password }; const response = await fetch('/login', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data) }); const result = await response.json(); console.log(result); }); </script> </body> </html> ``` 这里的HTML代码包含一个表单，其中包含用户名和密码字段以及一个提交按钮。当用户点击提交按钮时，JavaScript代码将捕获表单提交事件，阻止默认行为，并从表单中获取用户名和密码。然后，它将这些值作为JSON数据发送到服务器的'/login'路径。 Node.js服务器代码： ```javascript const express = require('express'); const app = express(); const port = 3000; app.use(express.json()); app.post('/login', (req, res) => { const { username, password } = req.body; // 在这里检查用户名和密码是否有效 // 如果有效，则返回一个JSON响应 // 如果无效，则返回一个错误响应 if (username === 'admin' && password === 'admin') { res.json({ success: true }); } else { res.status(401).json({ error: 'Invalid username or password' }); } }); app.listen(port, () => { console.log(`Server listening at http://localhost:${port}`); }); ``` 这里的Node.js代码使用Express框架来创建一个HTTP服务器。它使用中间件来解析JSON请求正文，并在'/login'路径上创建一个POST路由。当服务器接收到来自客户端的POST请求时，它从请求正文中提取用户名和密码，并检查它们是否有效。如果用户名和密码有效，则服务器将返回一个JSON响应，指示成功登录。如果无效，则服务器将返回一个错误响应，指示无效的用户名或密码。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值