首頁  >  問答  >  主體

node.js - Nodejs 上傳大檔案(影片),採用【resumable.js + formidable】

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.上傳大影片是否可以參考這樣的寫法?

如果有思路請指點指點,萬分感謝

过去多啦不再A梦过去多啦不再A梦2684 天前1394

全部回覆(1)我來回復

  • 黄舟

    黄舟2017-05-19 10:50:07

    有一文章比較適合你的一部分問題,你有必要看一下:純js實作檔案切片上傳,斷點續傳,程式碼簡單明了
    /a/11...

    回覆
    0
  • 取消回覆