Skip to content

大文件上传

大文件上传是前端领域中常见的需求,下面是我模仿阿里云的文件上传,阿里云的文件上传几乎 包含了文件上传的所有内容,非常值得学习!

实现的大致思路:

1. 通过拖拽api实现文件的拖拽,并拿到相应的文件
2. 实现拖拽文件夹的功能,可以将整个文件夹中的文件一起上传
3. 拿到所有的文件,就可以进行分片了
4. 分片后计算分片的hash值,调用后端接口上传分片
5. 上传完毕后通知后端进行合并。

大文件上传所需要了解的所有前置知识:

  1. 拖拽Api
  2. 如何选择文件夹,并兼容各个浏览器
  3. 如何获取文件夹中的文件
  4. 如何进行分片
  5. 如何读取文件内容并计算文件的hash值(递归) ---如何处理异步代码
  6. 如何确保文件分片上传完毕通知后端

1. 拖拽Api

js

2. 选择文件夹,并适配各个浏览器

html

3. 如何获取文件夹中的文件

js

4. 分片

js

5. 计算文件hash值

js

6. 通知后端