Node.js 原生 HTTP 模块模拟浏览器文件上传实现

作者:夜航船

时间:2026-10-29

浏览:665

本文介绍如何在 Node.js 中不依赖第三方库,利用原生 http、fs 和 path 模块手动构建 multipart/form-data 格式的 POST 请求。通过手动拼接 Boundary、处理文件流与元数据,实现单文件上传功能,并解析 MIME 类型以构造符合标准的 HTTP 请求体。

文章目录

Node.js 原生 HTTP 模块模拟浏览器文件上传实现

此示例曾发布于 OSChina,现整理于此。



该实现仅支持单次上传单个文件。


具体实现代码如下:

 
var path=require("path");
var fs=require("fs");
var http=require("http");
// 构造普通字段的 Payload
var getfield=function(field, value) {
return 'Content-Disposition: form-data; name="'+field+'"\r\n\r\n'+value+'\r\n';
} 
// 构造文件字段的 Payload 头部
var getfieldHead=function (field, filename) {
var fileFieldHead='Content-Disposition: form-data; name="'+field+'"; filename="'+filename+'"\r\n'+'Content-Type: '+getMime(filename)+'\r\n\r\n';
return fileFieldHead;
} 
// 获取文件的 MIME 类型
var getMime=function (filename) {
var mimes = {
'.png': 'image/png',
'.gif': 'image/gif',
'.jpg': 'image/jpeg',
'.jpeg': 'image/jpeg',
'.js': 'appliction/json',
'.torrent': 'application/octet-stream'
}; 
var ext = path.extname(filename);
var mime = mimes[ext];
mime=!!mime?mime:'application/octet-stream';
return mime;
} 
// 生成随机 Boundary 字符串
var getBoundary=function() {
var max = 9007199254740992;
var dec = Math.random() * max;
var hex = dec.toString(36);
var boundary = hex;
return boundary;
} 
// 生成 Boundary 边界标识
var getBoundaryBorder=function (boundary) {
return '--'+boundary+'\r\n';
} 
// 格式化字段 Payload
function fieldPayload(opts) {
var payload=[];
for(var id in opts.field){
payload.push(getfield(id,opts.field[id]));
} 
payload.push("");
return payload.join(getBoundaryBorder(opts.boundary));
} 
// 发起 POST 请求
function postRequest (opts) {
filereadstream(opts,function (buffer) {
var options=require('url').parse(opts.url);
var Header={};
var h=getBoundaryBorder(opts.boundary);
var e=fieldPayload(opts);
var a=getfieldHead(opts.param,opts.file);
var d="\r\n"+h;
Header["Content-Length"]=Buffer.byteLength(h+e+a+d)+buffer.length;
Header["Content-Type"]='multipart/form-data; boundary='+opts.boundary;
options.headers=Header;
options.method='POST';
var req=http.request(options,function(res){
var data='';
res.on('data', function (chunk) {
data+=chunk;
}); 
res.on('end', function () {
console.log(res.statusCode)
console.log(data);
}); 
}); 
req.write(h+e+a);log.diy(h+e+a+buffer+d);
req.write(buffer);
req.end(d);
}); 
} 
// 读取文件流
function filereadstream(opts, fn) {
var readstream = fs.createReadStream(opts.file,{flags:'r',encoding:null});
var chunks=[];
var length = 0;
readstream.on('data', function(chunk) {
length += chunk.length;
chunks.push(chunk);
}); 
readstream.on('end', function() {
var buffer = new Buffer(length);
for(var i = 0, pos = 0, size = chunks.length; i < size; i++) {
chunks[i].copy(buffer, pos);
pos += chunks[i].length;
} 
fn(buffer);
}); 
} 
// 配置上传参数
var opt={
"url":"http://xxxx.xx",//url
"file":"00.jpg",//文件位置
"param":"file",//文件上传字段名
"field":{//其余post字段
"client":"1",
"title":"ok"
}, 
"boundary":"----WebKitFormBoundary"+getBoundary()
} 
postRequest(opt);
/* 
------WebKitFormBoundaryuzKmkAovUuYsQ1Dt\r\n
Content-Disposition: form-data; name="file"; filename="00.jpg"\r\n
Content-Type: application/octet-stream
\r\n
\r\n +file\r\n
------WebKitFormBoundaryuzKmkAovUuYsQ1Dt\r\n
Content-Disposition: form-data; name="fieldName"
\r\n
\r\n +value\r\n
------WebKitFormBoundaryuzKmkAovUuYsQ1Dt--
*/ 

上述注释部分为标准格式示例,其中“\r\n”代表实际的换行符序列,此处为了阅读清晰进行了视觉调整。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章