大文件怎样实现快速上传?

大文件怎样实现快速上传?

什么是大文件上传,简单思路是什么?

大文件快速上传的方案，相信你也有过了解，其实无非就是将 文件变小，也就是通过 压缩文件资源 或者 文件资源分块 后再上传。

本文只介绍资源分块上传的方式，并且会通过 前端（vue3 + vite） 和 服务端（nodejs + koa2） 交互的方式，实现大文件分块上传的简单功能.

思路如下:

问题 1：谁负责资源分块？谁负责资源整合？
当然这个问题也很简单，肯定是前端负责分块，服务端负责整合.
问题 2：前端怎么对资源进行分块？
首先是选择上传的文件资源，接着就可以得到对应的文件对象 File，而 File.prototype.slice 方法可以实现资源的分块，当然也有人说是 Blob.prototype.slice 方法，
因为 Blob.prototype.slice === File.prototype.slice.
问题 3：服务端怎么知道什么时候要整合资源？如何保证资源整合的有序性？
由于前端会将资源分块，然后单独发送请求，也就是说，原来 1 个文件对应 1 个上传请求，现在可能会变成 1 个文件对应 n 个上传请求，所以前端可以基于 Promise.all 
将这多个接口整合，上传完成在发送一个合并的请求，通知服务端进行合并。合并时可通过 nodejs 中的读写流（readStream/writeStream），将所有切片的流通过管道（pipe）输入
最终文件的流中。
在发送请求资源时，前端会定好每个文件对应的序号，并将当前分块、序号以及文件 hash 等信息一起发送给服务端，服务端在进行合并时，通过序号进行依次合并即可。
问题 4：如果某个分块的上传请求失败了，怎么办？
一旦服务端某个上传请求失败，会返回当前分块失败的信息，其中会包含文件名称、文件 hash、分块大小以及分块序号等，前端拿到这些信息后可以进行重传，同时考虑此时是否需要
将 Promise.all 替换为 Promise.allSettled 更方便.
 

　　

 

仅供参考学习

参考文献: 微信公众号: JS每日一题