1.需求: 上传大文件【视频】,Nodejs处理;
2.前端采用resumable对视频进行·分片·上传,后端采用formidable采用Buffer
进行处理
遇到的问题【以一个文本为例子上传】:
1. 后端写入成功后,无法打开文件【自动添加POST中相关的值】
X.代码部分
1.app.js
app.post('/upload', function(req, res){
var form = new formidable.IncomingForm();
//后缀名
form.keepExtensions = true;
//保存路径
form.uploadDir = './';
form.parse(req, function(err, fields, files) {
//console.log(util.inspect({fields: fields, files: files}));
});
var dd=[],ll=0;
form.handlePart=function(part) {
var dd=[],ll=0;
//Buffer加入数组
part.on('data', function(data) {
if (data.length == 0) {
return;
}
dd.push(data);
ll+=data.length;
});
part.on('end', function() {
//获取文件名
var p = './' + req.query.resumableFilename;
fs.open(p, 'a', function (err, fd) {
if (err) {
throw err;
}
var writeBuffer = dd,
offset = 0,
len = writeBuffer.length,
filePostion = null;
//写人Buffer
fs.write(fd, Buffer.concat(dd, ll), 0, ll, filePostion, function(){
})
});
});
}
});
2.Charles抓包数据
POST /upload?resumableChunkNumber=1&resumableChunkSize=1048576&resumableCurrentChunkSize=393&resumableTotalSize=393&resumableType=text%2Frtf&resumableIdentifier=393-rtf&resumableFilename=%E6%96%87%E6%9C%AC.rtf&resumableRelativePath=%E6%96%87%E6%9C%AC.rtf&resumableTotalChunks=1 HTTP/1.1
Host: 127.0.0.1:4000
------WebKitFormBoundaryeLW6trgJbBaZlvgP
Content-Disposition: form-data; name="file"; filename="文本.rtf"
Content-Type: application/octet-stream
------WebKitFormBoundaryeLW6trgJbBaZlvgP
Content-Disposition: form-data; name="resumableChunkNumber"
1
------WebKitFormBoundaryeLW6trgJbBaZlvgP
Content-Disposition: form-data; name="resumableChunkSize"
1048576
------WebKitFormBoundaryeLW6trgJbBaZlvgP
Content-Disposition: form-data; name="resumableCurrentChunkSize"
393
------WebKitFormBoundaryeLW6trgJbBaZlvgP
Content-Disposition: form-data; name="resumableTotalSize"
393
------WebKitFormBoundaryeLW6trgJbBaZlvgP
Content-Disposition: form-data; name="resumableType"
text/rtf
------WebKitFormBoundaryeLW6trgJbBaZlvgP
Content-Disposition: form-data; name="resumableIdentifier"
393-rtf
------WebKitFormBoundaryeLW6trgJbBaZlvgP
Content-Disposition: form-data; name="resumableFilename"
文本.rtf
------WebKitFormBoundaryeLW6trgJbBaZlvgP
Content-Disposition: form-data; name="resumableRelativePath"
文本.rtf
------WebKitFormBoundaryeLW6trgJbBaZlvgP
Content-Disposition: form-data; name="resumableTotalChunks"
1
------WebKitFormBoundaryeLW6trgJbBaZlvgP
Content-Disposition: form-data; name="file"; filename="文本.rtf"
Content-Type: application/octet-stream
{\rtf1\ansi\ansicpg936\cocoartf1504
{\fonttbl\f0\fnil\fcharset134 PingFangSC-Regular;}
{\colortbl;\red255\green255\blue255;}
{\*\expandedcolortbl;\csgray\c100000;}
\paperw11900\paperh16840\margl1440\margr1440\vieww10800\viewh8400\viewkind0
\pard\tx566\tx1133\tx1700\tx2267\tx2834\tx3401\tx3968\tx4535\tx5102\tx5669\tx6236\tx6803\pardirnatural\partightenfactor0
\f0\fs24 \cf0 \'c4\'e3\'ba\'c3}
------WebKitFormBoundaryeLW6trgJbBaZlvgP--
3.服务端获取的数据
写人文件的内容
11048576393393text/rtf393-rtf文本.rtf文本.rtf1{\rtf1\ansi\ansicpg936\cocoartf1504
{\fonttbl\f0\fnil\fcharset134 PingFangSC-Regular;}
{\colortbl;\red255\green255\blue255;}
{\*\expandedcolortbl;\csgray\c100000;}
\paperw11900\paperh16840\margl1440\margr1440\vieww10800\viewh8400\viewkind0
\pard\tx566\tx1133\tx1700\tx2267\tx2834\tx3401\tx3968\tx4535\tx5102\tx5669\tx6236\tx6803\pardirnatural\partightenfactor0
\f0\fs24 \cf0 \'c4\'e3\'ba\'c3}
4.问题所在
服务器端保存的文件的第一部分数据比前端提交的数据多了
如下内容`请输入代码
11048576393393text/rtf393-rtf文本.rtf文本.rtf1
该内容为POST中URL参数对应的值的拼接
,也就是http协议中的boundary的判断分割。如果手动删除该部分字符,文件是可以打开的
问题所在
1.如何不让它自动添加该属性?
2.上传大视频是否可以参照这样的写法?
有一文章比较适合你的一部分问题,你有必要看一下:纯js实现文件切片上传,断点续传,代码简单明了
https://segmentfault.com/a/11...