js + node uploads fragments

First, several HTML5 specification

• File
• FileReader
• ArrayBuffer
• Blob

File upload input file is the type of file, File Blob is based on the design.

Interface comes slice method can separate document, the purpose of fragmentation uploaded.

FileReader Blob can read the contents inside.

// Converts a string into a Blob object 
var BLOB = new new Blob ([ 'Chinese string' ], { 
    type: 'text / Plain' 
}); 
// convert the object into a string Blob 
var Reader = new new the FileReader () ; 
reader.readAsText (BLOB, 'UTF-. 8' ); 
reader.onload = function (E) { 
    console.info (reader.result); 
}

 

 

Upload File interface type is set to multipart / form-data, and upload the file slice after slice.

var file = document.getElementById('upload').file;
var form = new FormData();
var startSize = 0;
var chunkSize = 5242880; //每次分割5M
form.append('file',file.slice(startSize,startSize+chunkSize));

  startSize+=chunkSize;

xhr.open('post', '/upload', true);
xhr.send(form);

 

node where you can parse files with middleware, such as formidable, multer

const formidable = require('formidable');

app.use(formidable (
   {
      encoding: 'utf-8',
      multiples: true, // req.files to be arrays of files
   }
));

 

The interface can be read in the stream fs.createReadStream, file read and write file operations, as follows.

var fileInfo,
   fileReceive;

app.post('/upload',function (req, res) {
   console.log('files',req.files);
      var file = req.files.file;
      if(file && fileInfo.end < fileInfo.size){
         fs.readFile(file.path,(err,data)=>{
            if(err){
               return console.error(err);
            };
            fileReceive = fileReceive ? Buffer.concat([fileReceive,data]) : data;
            fileInfo.end += data.length;

            if(fileInfo.end >= fileInfo.size){
               fs.writeFile(fileInfo.name,fileReceive,()=>{
                  console.log('上传完成！');
               });
            };
            res.send({progress: fileInfo.end / fileInfo.size});
         });
      }else{
         res.send('error');
      }
 });

 

First obtain the total file size, file name and other information, and then after each received fragmented files on the buffer merge and save the file size has been received, after receiving complete save file.

Note This method requires more memory than node operable accept the file, or will again read a file each time when receiving segment file, no node in the cache, but this is time-consuming.