前端大文件上传，断点续传（附源码） |
您所在的位置：网站首页 › 定义变量包括哪些类型 › 前端大文件上传，断点续传（附源码） |
|
前言
无论是面试还是实际工作，我们都会遇到大文件上传的问题。事实上，在我之前的面试中，也被问到上传大文件（Excel）如何处理，当时答的磕磕巴巴，直接导致整个面试以失败结束。 最近想起了整个事情，花了点时间，整理出这个demo，当然了，整篇文章，不仅仅讲思路过程，最后也会附送源码 前端：Vue.js Element-Ui 后端：node.js express fs 思路 前端 大文件上传 将大文件转换成二进制流的格式 利用流可以切割的属性，将二进制流切割成多份 组装和分割块同等数量的请求块，并行或串行的形式发出请求 待我们监听到所有请求都成功发出去以后，再给服务端发出一个合并的信号 断点续传 为每一个文件切割块添加不同的标识 当上传成功的之后，记录上传成功的标识 当我们暂停或者发送失败后，可以重新发送没有上传成功的切割文件 后端 接收每一个切割文件，并在接收成功后，存到指定位置，并告诉前端接收成功 收到合并信号，将所有的切割文件排序，合并，生成最终的大文件，然后删除切割小文件，并告知前端大文件的地址其实说到这里，如果你看懂并且理解了以上的思路，那么你已经学会了大文件上传+断点续传的 80%。下面的具体实现过程，对你来讲，就是小意思... 大文件上传代码部分本次html部分，我们使用了 Element-Ui 的组件，代码很容易理解 将文件拖到此处，或点击上传js部分的逻辑，按照我们的上面的分析，我们可以写出如下的结构 methods: { // 提交文件后触发 changeFile() { this.filepParse() // coding... 进行分片 // ... // 创建切片请求 this.createSendQeq() this.sendQeq() this.mergeUpload }, // 将文件变成二进制，方便后续分片 filepParse() { }, // 创建切片请求 createSendQeq() { }, // 将每一个切片 并行/串行 的方式发出 sendQeq() { }, // 发送代码合并请求 mergeUpload() { } }按照上面的代码，写出这样的结构还是很容易的，接下来要做的就是补全这些逻辑 将文件变成二进制，方便后续分片js常见的二进制格式有 Blob,ArrayBuffer和Buffe，这里没有采用其他文章常用的Blob，而是采用了ArrayBuffer，如果你对二进制流不了解，欢迎加我关注我的公众号【聪明可爱小轩轩】加我私人微信，到时候我们专门写一篇文章。 又因为我们解析过程比较久，所以我们采用 promise，异步处理的方式 filepParse(file, type) { const caseType = { 'base64': 'readAsDataURL', 'buffer': 'readAsArrayBuffer' } const fileRead = new FileReader() return new Promise(resolve => { fileRead[caseType[type]](file) fileRead.onload = (res) => { resolve(res.target.result) } }) } 将大文件进行分片在我们拿到具体的二进制流之后我们就可以进行分块了，就像操作数组一样方便。 当然了，我们在拆分切片大文件的时候，还要考虑大文件的合并，所以我们的拆分必须有规律，比如 1-1，1-2，1-3 ，1-5 这样的，到时候服务端拿到切片数据，当接收到合并信号当时候，就可以将这些切片排序合并了。 同时，我们为了避免同一个文件（改名字）多次上传，我们引入了 spark-md5 ，根据具体文件内容，生成hash值 const buffer = await this.filepParse(file,'buffer') const sparkMD5 = new SparkMD5.ArrayBuffer() sparkMD5.append(buffer) this.hash = sparkMD5.end()而我们，为每一个切片命名当时候，也改成了 hash-1，hash-2 这种形式， 我们分割大文件的时候，可以采用 定切片数量，定切片大小，两种方式，我们这里采用了 定切片数量这个简单的方式做例子 const partSize = file.size / 10 let current = 0 for (let i = 0 ;i < 10 ;i++) { let reqItem = { chunk: file.slice(current, current + partSize), filename: `${this.hash}_${i}.${suffix}` } current += partSize partList.push(reqItem) } this.partList = partList当我们采用定切片数量的方式，将我们大文件切割完成，并将切割后的数据存给一个数组变量，接下来，就可以封装的切片请求了 创建切片请求这里需要注意的就是，我们发出去的数据采用的是FormData数据格式，至于为什么大家可以找资料查询。如果依旧不太明白，老规矩，欢迎加我关注我的公众号【聪明可爱小轩轩】加我私人微信，到时候我们专门写一篇文章说明。 createSendQeq() { const reqPartList = [] this.partList.forEach((item,index) => { const reqFn = () => { const formData = new FormData(); formData.append("chunk", item.chunk); formData.append("filename", item.filename); return axios.post("/upload",formData,{ headers: {"Content-Type": "multipart/form-data"} }).then(res => { console.log(res) }) } reqPartList.push(reqFn) }) return reqPartList } 将每一个切片 并行/串行 的方式发出目前切片已经分好了，并且我们的请求也已经包装好了。 目前我们有两个方案 并行/串行 因为串行容易理解，这里拿串行举例子。 我们每成功的发出去一个请求，那么我们对应的下标就加一，证明我们的发送成功。当 i 下标和 我们的切片数相同的时候，我们默认发送成功，触发 合并（merge）请求 sendQeq() { const reqPartList = this.createSendQeq() let i = 0 let send = async () => { if (i >= reqPartList.length) { // 上传完成 this.mergeUpload() return } await reqPartList[i]() i++ send() } send() }当然了，并行发送的最大缺点就是没有串行快，但胜在代码简单，容易理解代码 断点续传代码部分理解了前面的思路，这一部分的代码也容易得到思路 点击暂停的时候，停止上传。点击继续上传的话，我们继续上传剩下的请求，所以，我们对上传成功的请求要做处理 if (res.data.code === 0) { this.count += 1; // 传完的切片我们把它移除掉 this.partList.splice(index, 1); }如果上传成功，我们就将其从请求数组中剥离出去，这样我们就可以保证剩下的，就是待上传的了，断点续传的核心就是如此，其他是一些业务了 至于服务端的代码，这里就不具体说明了，只要是看懂了整体的思路，看服务端代码还是很容易理解的。如果有问题，欢迎关注公众号【聪明可爱小轩轩】加我私人微信，我们一起学习进步。当然了，如果想要拿到代码的，回复关键字bigFile即可... 下面，让我们再次分析一下我们的这个大文件上传呗 问题总结当前的例子，只是提供一个简单的思路，比如： 某个切片上传失败怎么办？ 如何进行并行上传（更快） 当前是规定了切片的数量，改成定切片大小如何处理 上传过程中刷新页面怎么办 大文件上传如何结合 Web Work 处理大文件上传 如何实现秒传诸如此类，这个例子还有很多需要我们完善的地方，等后续时间宽裕，我会出一个加强版的大文件上传 如果你感觉这篇文章对你有帮助，欢迎关注公众号【聪明可爱小轩轩】 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |