大规格文件的上传优化思路详解(2)

当全部分片上传成功，通知服务端进行合并，当有一个分片上传失败时，提示“上传失败”。在重新上传时，通过文件 MD5 得到文件的上传状态，当服务器已经有该 MD5 对应的切片时，代表该切片已经上传过，无需再次上传，当服务器找不到该 MD5 对应的切片时，代表该切片需要上传，用户只需上传这部分切片，就可以完整上传整个文件，这就是文件的断点续传。

// 上传chunk upload (i, fileMd5Value, file) { const { uploadProgress, chunks } = this return new Promise((resolve, reject) => { let { chunkSize } = this // 构造一个表单，FormData是HTML5新增的 let end = (i + 1) * chunkSize >= file.size ? file.size : (i + 1) * chunkSize let form = new FormData() form.append('data', file.slice(i * chunkSize, end)) // file对象的slice方法用于切出文件的一部分 form.append('total', chunks) // 总片数 form.append('index', i) // 当前是第几片 form.append('fileMd5Value', fileMd5Value) services .uploadLarge(form) .then(data => { if (data.ok) { this.hasUploaded++ uploadProgress(file) } console.log({ data }) resolve(data) }) .catch(err => { reject(err) }) }) }

5. 上传进度

虽然分片批量上传比大文件单次上传会快很多，也还是有一段加载时间，这时应该加上上传进度的提示，实时显示文件上传进度。

原生 Javascript 的 XMLHttpRequest 有提供 progress 事件，这个事件会返回文件已上传的大小和总大小。项目使用 axios 对 ajax 进行封装，可以在 config 中增加 onUploadProgress 方法，监听文件上传进度。

const config = { onUploadProgress: progressEvent => { var complete = (progressEvent.loaded / progressEvent.total * 100 | 0) + '%' } } services.uploadChunk(form, config)

6. 合并分片

（编辑：ASP站长网）