分片上傳與斷點續傳解決方案

上傳文件，基本上是每個網站應用都會具有的一個功能。對於一個網絡存儲應用，對於上傳功能要求更是迫切。

現在市面上成熟上傳插件，如WebUploader，"體積太大"，不適合於移動端上傳；再加上做爲一位程序員的"操守"，固然仍是更喜歡本身造輪子。

因而花了一天半時間，MoUploader應運而生。爲何叫MoUploader呢？Mo表示Mobile(其實更是由於個人綽號moyu)

關於實現原理

首先須要明確，上傳這東西不單單是隻須要前端就能完成的很好的，須要前端後端統一數據格式，從而實現斷點續傳。（因此，該文適合於全棧工程師，至少是想成爲）

還有，爲何須要分片，不分片能實現斷點續傳嗎？分片是爲了充分利用網絡帶寬，加快上傳速度；不分片也是可以實現斷點續傳的。詳細參考 HTML5文件上傳組件深度剖析.
分片上傳與斷點續傳之間沒有很直接的關係.

好了，進入正題。

實現斷點續傳的前提是須要服務器記錄某文件的上傳進度，那麼根據什麼判斷是否是同一個文件呢？能夠利用文件內容求md5碼，若是文件過大，求取md5碼也是一個很長的過程，因此對於大文件，只能針對某一段數據進行計算，加上服務器對cookie用戶信息的判斷，獲得相對惟一的key。

在前端頁面，須要將文件按照必定大小進行分片，一次請求只發送這一小片數據，因此咱們能夠同時發起多個請求。但一次同時請求的鏈接數不宜過多，服務器負載太重。對於文件分片操做，H5具備十分強大的File API，直接利用File對象的slice方法便可獲得Blob對象。

至於同時傳輸數據的鏈接數控制邏輯，就須要花點腦子思考了。前端把數據順利得傳給服務器了，服務器只須要按照數據中給的開始字節位置，與讀取到的文件片斷數據，寫入文件便可

更多信息就看源碼吧！MoUploader

功能實現

文件結構

file-upload/
├── bower_components/ # bower包
├── db.js   # 數據操做接口
├── demo.html
├── md5.json # 數據
├── mouploader.js # 源碼
├── README.md 
└── server.js # demo.html服務, 創建在3000端口

1 directories, 8 files.

(打印文件目錄樹使用的是本身寫的print-dir)

怎麼使用

1. 引入script，amd/cmd/...，

2. 使用MoUploader

   input.onchange = function (e) {
       var self = this;
       var moUploader = MoUploader({ 
           files: this.files,
           uploadUrl: '/upload',
           request: false,
           onBeforeUpload: function (index) {
               if(index>=0) {
                   self.files[index].progress = appendUploading(self.files[index], index)
               }
           },
           onOverAllProgress: function (index, loaded, total) {
               console.log(loaded / total)
               //setProgress(loaded / total, self.files[index].progress)
           },
           onLoad: function (index, chunkIndex, chunksNum) {
               console.log('onLoad', this, arguments)
           },
           onAbort: function (index, chunkIndex, chunksNum) {
               console.log('onAbort', this, arguments)
           },
           onError: function (index, chunkIndex, chunksNum) {
               console.log('onError', this, arguments)
           },
           onContinue: function (file, md5, index) {
               return new Promise(function(reslove, reject) {
                   var xhr = new XMLHttpRequest()
                   xhr.open('GET', '/getFile?md5='+md5, true);
                   xhr.send(null);
                   xhr.addEventListener('readystatechange', function () {
                       if(xhr.readyState === 4 && xhr.status === 200) {
                           var json = JSON.parse(xhr.responseText);
                           log(json)
                           reslove(json.pos)
                       }
                   })
               })
           }
       })
       
       // pause or continue upload
       // if index < 0, will run for all files
       // moUploader.pause(index);
       // moUploader.continue(index);    
   }

3. 配置選項

   var default_ops = {
       // chunk Size: byte
       chunkSize: (1<<20) * 5,
       // Number: request Number.
       // Array: files requests.
       // Boolean: open or close Slice, if false, chunkSize don't work.
       request: 3,
       files: [],
       uploadUrl: '/',
       // function: get uploaded pos.
       // arguments: file, md5, index.
       // need return a promise object which will return uploaded pos.
       onContinue: null,
       // if false, md5 will be setted by filename.
       md5: true,
       // md5Size: slice file 0 - md5Size for calculate md5
       md5Size: (1<<20) * 50,
       // called when before upload.
       // arguments: file index or -1 (will begin upload)
       onBeforeUpload: null,
       // function: uploading progress listener.
       // *only listen one request.*
       // arguments: index, chunkIndex, chunksNum, loaded, total.
       onProgress: null,
       // function: overall uploading progress listener.
       // arguments: index, loaded, total
       onOverAllProgress: null,
       // function: called when one request is ended.
       // arguments: index, chunkIndex, chunksNum
       onLoad: null,
       // function: called when one request is aborted.
       // arguments: index, chunkIndex, chunksNum
       onAbort: null,
       // function: called when one request happens error.
       // arguments: index, chunkIndex, chunksNum
       onError: null
   }

4. 服務器數據處理 (Node.js)
   數據分段寫入文件

   function writeBuffer(bf, path, pos) {
       var fd = fs.openSync(path, 'a+');
       fs.writeSync(fd, bf, 0, bf.length, Number(pos) || 0)
       console.log(`write buffer, pos: ${pos}, path: ${path}, length: ${bf.length}`)
   }
   
   function store(param, chunks) {
       param.chunks = param.chunks || 1
       param.chunk = param.chunk || 0
       var p = path.join('./upload', param.name)
       var bf = Buffer.concat(chunks);
   
       var json = db.get(param.md5);
       if(json) {
           json.pos = parseInt(json.pos!=null?json.pos : 0)
           json.size = parseInt(json.size!=null?json.size : 0)
       }
       if(!json || (json.pos+json.size) <= param.pos) {
           // 新的數據pos比數據庫中大，更新數據
           param.size = bf.length
           db.set(param.md5, param)
           db.save();
           writeBuffer(bf, p, param.pos || 0)
       }
   }
   
   var multiparty = require('multiparty')
   var form = new multiparty.Form({
       autoFields: true,
       autoFiles: false,
   });
   
   form.on('part', (part) => {
       form.on('aborted', () => {
           //意外退出或者暫停都會保存數據
           console.log('aborted');
           store(param, chunks)
       })
   
       var chunks = []
       part.on('data', (data) => {
           if(part.filename) {
               chunks.push(data)
           }
       }).on('end', () => {
           console.log('end')
           store(param, chunks)
       })
   
   });
   form.on('field', (name, value) => {
       param[name] = value;
   });