前端大文件分段,主要是用h5 File file.slice(start,end) 对大文件进行切割,然后后台按照分段顺序对文件进行合并,文件md5值通过spark-md5生成
- 前端先对文件进行md5加密,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 }复制代码
async _md5File(files) { const spark = new SparkMd5.ArrayBuffer() var fileReader for (var i = 0; i < files.length; i++) { fileReader = new FileReader() fileReader.readAsArrayBuffer(files[i]) } return new Promise((resolve, reject) => { fileReader.onload = function(e) { spark.append(e.target.result) if (i === files.length) { resolve(spark.end()) } } }) }复制代码
- 上传文件md5,文件名,后台验证是否已经上传过,上传过,返回以上传的包含区块的数组,没有上传返回空的数组
- 上传区块 文件上传:
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 }复制代码
- 所有区块上传成功后,发起对文件的合并请求