获取multipart/form-data请求
简单创建个表单，提交文本信息和文件
在服务器端处理一下请求，首先通过字符串打印收到的结果
创建一个txt文本文件，输入内容test，回车，abc，回车，2333333，通过选择文件按钮进行上传，查看收到的结果
关于multipart/form-data看这里：理解multipart/form-data请求
分析multipart/form-data数据
- 肉眼可见的，数据一共分为三块，正好对应用户名、密码、文件
而------WebKitFormBoundaryy0cQW9RwXspsKmbj是分隔符
- 不妨用<分隔符>代替------WebKitFormBoundaryy0cQW9RwXspsKmbj是分隔符
<分隔符>
Content-Disposition: form-data; name="user"
xiaoming
<分隔符>
Content-Disposition: form-data; name="password"
123456
<分隔符>
Content-Disposition: form-data; name="file"; filename="1.txt"
Content-Type: text/plain
test
abc
2333333
<分隔符>--//两个--代表数据结束
- 注意每行末尾都有\r\n（http协议规定换行方式）
<分隔符>\r\n
Content-Disposition: form-data; name="user"\r\n
\r\n
xiaoming\r\n
<分隔符>\r\n
Content-Disposition: form-data; name="password"\r\n
\r\n
123456\r\n
<分隔符>\r\n
Content-Disposition: form-data; name="file"; filename="1.txt"\r\n
Content-Type: text/plain\r\n
\r\n
test
abc
2333333\r\n
<分隔符>--\r\n
- 将数据描述、数据值、文件内容用文字替换，将这些东西归到<分隔符>行上
<分隔符>\r\n<数据描述>\r\n\r\n<数据值>\r\n
<分隔符>\r\n<数据描述>\r\n\r\n<数据值>\r\n
<分隔符>\r\n<数据描述1>\r\n<数据描述2>\r\n\r\n<文件内容>\r\n
<分隔符>--\r\n
- 用"<分隔符>"切开数据产生数组(split)
空，
\r\n<数据描述>\r\n\r\n<数据值>\r\n，
\r\n<数据描述>\r\n\r\n<数据值>\r\n，
\r\n<数据描述1>\r\n<数据描述2>\r\n\r\n<文件内容>\r\n，
--\r\n
- 丢掉头尾项(空和--\r\n) 和 每一项的头尾\r\n
<数据描述>\r\n\r\n<数据值>\r\n，
<数据描述>\r\n\r\n<数据值>\r\n，
<数据描述1>\r\n<数据描述2>\r\n\r\n<文件内容>\r\n
- 用第一次出现的\r\n切分，因为文件内容中可能也有\r\n，所以用第一次的
普通数据:[数据描述，数据值]
或
文件数据:[数据描述1\r\n数据描述2，<文件内容>]
- 根据描述的里面有无"\r\n"
没有——普通数据:[数据描述，数据值]
有——文件数据:[数据描述1\r\n数据描述2，<文件内容>]
切分multipart/form-data数据
可以看到，上述步骤中，有好几次切分操作，但是node没有split方法，需要手动写
Buffer.prototype.split = Buffer.prototype.split || function(b){
let arr = [];
let cur = 0;//开始切割的下标
let n = 0;//切割项的下标
while((n = this.indexOf(b,cur)) != -1){//找到切割项的时候
arr.push(this.slice(cur,n))//从开始切割的下标，到当前切割项之间的内容
cur = n + b.length;//开始切割下标要加上切去的内容
}
arr.push(this.slice(cur));
return arr;
}
在node里正式解析multipart/form-data数据
这种处理方式是等到所有数据都接收到才开始处理(req.on('end')之后处理的数据 )，会导致所有数据堆到内存里
const http = require('http');
const common = require('./libs/common')
const fs = require('fs')
const { v4: uuid } = require('uuid');
let server = http.createServer((req,res)=>{
let arr = []
req.on('data',data=>{
arr.push(data)
})
req.on('end',end=>{
let data = Buffer.concat(arr)
//解析二进制文件上传
let post = {};//普通数据
let files = {};//文件数据
if(req.headers['content-type']){
let str = req.headers['content-type'].split('; ')[1];//获取content-type的后一个参数
if(str){
let boundary = '--' + str.split('=')[1];//获取分隔符
//1.切分数据
let arr = data.split(boundary);
//2.丢弃头尾数据
arr.shift()
arr.pop()
//3.丢弃每个数据头尾的\r\n
arr = arr.map(buffer => buffer.slice(2,buffer.length - 2));
//4.每个数据在第一个\r\n处切成两半
arr.forEach(buffer => {
let n = buffer.indexOf('\r\n\r\n');
let disposition = buffer.slice(0,n);//content-Disposition部分
let content = buffer.slice(n + 4);//内容部分
disposition = disposition.toString();
if(disposition.indexOf('\r\n') == -1){
//Content-Disposition: form-data; name="user"\r\n
content = content.toString();
let name = disposition.split('; ')[1].split('=')[1];//拿到"user"
name = name.substring(1,name.length - 1);
post[name] = content;
}else{
//Content-Disposition: form-data; name="file"; filename="1.txt"\r\n
//Content-Type: text/plain
let [line1,line2] = disposition.split('\r\n');
let [,name,filename] = line1.split('; ');
let type = line2.split(': ')[1];
name = name.split('=')[1]
name = name.substring(1,name.length - 1);
filename = filename.split('=')[1]
filename = filename.substring(1,filename.length - 1);
let path = `upload/${uuid().replace(/-/g,'')}`//文件路径
fs.writeFile(path,content,err=>{
if(err){
console.log('文件写入失败',err);
}else{
files[name] = {filename,path,type};
console.log(files)
}
})
res.end()
}
});
}
}
})
})
server.listen(5000)
