记录一次前端大文件上传，分段上传，支持断点上传，秒传

前端大文件分段，主要是用h5 File file.slice(start,end) 对大文件进行切割，然后后台按照分段顺序对文件进行合并，文件md5值通过spark-md5生成

1. 前端先对文件进行md5加密，md5加密可以用作文件的唯一标示，也可以进行文件秒传实现（文件生成md5值，只要文件内容一样生成的md5值是一样的）                                   文件分段：                                                      

   fileSlice(file) {  
       const files = []  
       for (let i = 0; i < file.size; i += this.chunkSize) {    
           const end = (i + this.chunkSize) > file.size ? file.size : i + this.chunkSize   
            files.push(file.slice(i, (end > file.size) ? file.size : end))  
           }  
       return files
   }
   

                                                                                                                         生成md5：

   async _md5File(files) {  
       const spark = new SparkMd5.ArrayBuffer()  
       var fileReader  
       for (var i = 0; i < files.length; i++) {    
           const arrayBuffer = await this.readFile(files[i]);        spark.append(arrayBuffer);    }  
       return spark.end();
   },
   readFile(file) {      return new Promise((resolve) => {        const fileReader = new FileReader();        fileReader.readAsArrayBuffer(file);        fileReader.onload = function(e) {          resolve(e.target.result);        };      });},
   

2. 上传文件md5，文件名，后台验证是否已经上传过，上传过，返回以上传的包含区块的数组，没有上传返回空的数组                                                                                   

3. 上传区块                                                                                                            文件上传：

   async fileUpload(file, index) { 
        var form = new FormData()  
        form.append('chunkIndex', index)  
        form.append('fileName', this.fileName)  
        form.append('file', file)  
        form.append('md5', this.md5)  
        var xhr = new XMLHttpRequest()  
        xhr.open('post', 'http://localhost:8888/upload', true)  
        const pro = new Promise((resolve, reject) => {    
         xhr.onload = function() {      // alert('上传完成!')      
           resolve('success')    }    
           xhr.onerror = function() {      
              reject('error')  
       }       })  
       xhr.send(form)  
       return pro
   }
   

4. 所有区块上传成功后，发起对文件的合并请求