node.js - Nodejs 上传大文件(视频),采用【resumable.js + formidable】

浏览:50日期:2022-09-10

问题描述

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.1Host: 127.0.0.1:4000------WebKitFormBoundaryeLW6trgJbBaZlvgPContent-Disposition: form-data; name='file'; filename='文本.rtf'Content-Type: application/octet-stream------WebKitFormBoundaryeLW6trgJbBaZlvgPContent-Disposition: form-data; name='resumableChunkNumber'1------WebKitFormBoundaryeLW6trgJbBaZlvgPContent-Disposition: form-data; name='resumableChunkSize'1048576------WebKitFormBoundaryeLW6trgJbBaZlvgPContent-Disposition: form-data; name='resumableCurrentChunkSize'393------WebKitFormBoundaryeLW6trgJbBaZlvgPContent-Disposition: form-data; name='resumableTotalSize'393------WebKitFormBoundaryeLW6trgJbBaZlvgPContent-Disposition: form-data; name='resumableType'text/rtf------WebKitFormBoundaryeLW6trgJbBaZlvgPContent-Disposition: form-data; name='resumableIdentifier'393-rtf------WebKitFormBoundaryeLW6trgJbBaZlvgPContent-Disposition: form-data; name='resumableFilename'文本.rtf------WebKitFormBoundaryeLW6trgJbBaZlvgPContent-Disposition: form-data; name='resumableRelativePath'文本.rtf------WebKitFormBoundaryeLW6trgJbBaZlvgPContent-Disposition: form-data; name='resumableTotalChunks'1------WebKitFormBoundaryeLW6trgJbBaZlvgPContent-Disposition: form-data; name='file'; filename='文本.rtf'Content-Type: application/octet-stream{rtf1ansiansicpg936cocoartf1504{fonttblf0fnilfcharset134 PingFangSC-Regular;}{colortbl;red255green255blue255;}{*expandedcolortbl;csgrayc100000;}paperw11900paperh16840margl1440margr1440vieww10800viewh8400viewkind0pardtx566tx1133tx1700tx2267tx2834tx3401tx3968tx4535tx5102tx5669tx6236tx6803pardirnaturalpartightenfactor0f0fs24 cf0 ’c4’e3’ba’c3}------WebKitFormBoundaryeLW6trgJbBaZlvgP--3.服务端获取的数据

写人文件的内容

11048576393393text/rtf393-rtf文本.rtf文本.rtf1{rtf1ansiansicpg936cocoartf1504{fonttblf0fnilfcharset134 PingFangSC-Regular;}{colortbl;red255green255blue255;}{*expandedcolortbl;csgrayc100000;}paperw11900paperh16840margl1440margr1440vieww10800viewh8400viewkind0pardtx566tx1133tx1700tx2267tx2834tx3401tx3968tx4535tx5102tx5669tx6236tx6803pardirnaturalpartightenfactor0f0fs24 cf0 ’c4’e3’ba’c3}4.问题所在

服务器端保存的文件的第一部分数据比前端提交的数据多了如下内容`请输入代码

11048576393393text/rtf393-rtf文本.rtf文本.rtf1

该内容为POST中URL参数对应的值的拼接,也就是http协议中的boundary的判断分割。如果手动删除该部分字符,文件是可以打开的

问题所在

1.如何不让它自动添加该属性?2.上传大视频是否可以参照这样的写法?

如果有思路请指点指点,万分感谢

问题解答

回答1:

有一文章比较适合你的一部分问题,你有必要看一下:纯js实现文件切片上传,断点续传,代码简单明了/a/11...

相关文章: