# 三.文件处理(上传下载)

前言

重点介绍大文件上传下载的应用场景,包括断点续传等

# 1.断点续传

# 1.1 思路

  • 1、拿到文件,对文件进行切片,有两个方式,一种时固定数量,另一种时固定大小。
  • 2、用 SparkMD5 库对每一个分片进行命名(服务器接口后,会对相同 hash 的文件进行合并)
  • 3、发请求传文件,可以有串行和并行两种方式。这里使用串行,一个一个发,方便点击暂停上传的时候取消发送
  • 4、可以拿一个数组保存待发的文件,上传成功的文件可以从数组里面删除。这样,当再次点击继续发送的时候,就不需要重复发送了。
  • 5、等全部文件发完了,再发一个请求告诉服务器文件发完了

# 1.2 案例

  • 基于文件流方案代码
刷新
全屏/自适应
  • 基于 BASE64 的上传方案
刷新
全屏/自适应

# 2.文件下载

# 2.1 window.open

这样下载会打开一个新的窗口,如果下载错误,会在新的窗口展示错误信息

刷新
全屏/自适应

# 2.2 a 标签

适用于下载的文件小,如果文件大会导致崩溃或者页面无响应,或显示下载失败

刷新
全屏/自适应

# 2.3 axios

刷新
全屏/自适应

# 2.4 Fetch

刷新
全屏/自适应

# 2.5 download

文件较大的 download 方法(插件下载)

刷新
全屏/自适应