Skip to content
本页目录

大文件分片上传 ​

  • 通过二进制文件头部字节校验文件后缀名:防止通过修改后缀名上传不允许的文件格式;
  • 根据切片大小CHUNK_SIZE计算切片数chunks;
  • 切片后通过spark-md5计算文件hash值;
  • 上传前通过 hash 值先检查后端是否已有改文件

遇到了哪些问题?

  1. onUploadProgress的进度条异常问题? 为了直观的了解到文件还差多少上传完成,实现了一个上传进度功能,最开始使用Axios的onUploadProgress实现,结果这个方法在请求超时或者服务器异常的时候都会正常触发 (这个方法返回的进度只是文件从前端上传到服务器这一过程的进度而已)

    通过已成功上传的分片个数来显示进度,分片上传成功依次就更新一次进度

  2. 大文件通过spark-md5计算hash值时耗时过长问题?

    使用WebWorker(必须使用 Promise 封装,不然会有高并发问题)开启子线程,在子线程中对文件进行分片并计算hash

  3. 浏览器同域名同一时间请求的最大并发数限制问题? 分片文件上传的时候使用Promise.all()实现并发请求,小文件还好,大文件由于分片数过多,直接不响应了。

    全局声明一个最大请求并发数,每次并发多个请求前都以 (6/文件个数) 动态设置它,每次的并发请求个数为全局的最大请求并发数; 每个文件开始上传前都要计算哈希值和查询文件上次过没,然后才会轮到下一个文件开始上传,在这个等待时间里,相当于每次发起请求时间都错开了,根本没有机会同一时间并发请求 6 个。

  4. 断点续传功能?

    通过indexDB库localForage实现数据缓存,每次新打开页面都获取一次本地缓存indexDB(数据过大时会设置缓存失败)