大文件上传和优化

简介: 最近项目里面有一些视频处理的功能,大概流程就是后端拿到文件以后,使用FFmpeg等底层命令进行去水印,裁切等功能,虽然现在是短视频的年代,但是依然会出现一些高分辨率,高时长的大文件视频,这时候因为一些原因,如网络等,失败率会陡增。

上传文件往往需要走这么几个步骤:
1.判断类型
2.判断大小
3.拿到上传地址
4.往地址推送文件

当文件符合要求,且比较小的时候,成功率是比较高的,但如果文件大,上传的路径又复杂,再加上网络问题,失败率就会陡增,这时候该怎么改善体验呢?
很典型的一个场景,迅雷、百度云盘,这些都是允许用户主动暂停,或者允许进行一半失败了接着进行。

即使不是这样的场景,我们也希望达到两个目的:

一、大文件不因中途出了一点点问题就彻底失败。

二、上传过程可以获知当前进度,让用户知道传了多少,还要等待多久。

所以,提高上传成功率,让用户对较长的上传过程有所感知,就是我们优化的目标。

1. 第一步:文件分片

通常情况下,file文件来源于Input元素选择文件后返回的FileList对象,或者自由拖放操作生成的DataTransfer对象。

File的本身是没有slice的方法的,不过它从Blob的接口继承了该方法。

接下来,我们进行切割文件

  file.slice(0,2*1024*1024)

这是将文件从开头切割到2M大小的地方,然后我们只需要确定分片的文件阈值,例如50MB的文件就开始进行分片,然后每一片的大小,这里需要进行一个取舍,在片数较少的情况下,保证单片的传输效率

第二步:分片上传

  let index = 0,// 记录当前已经切割的分片大小
    fileList= [];  // 请求参数列表
while (index < file.size) {
   
    // 这里向参数列表添加参数项,具体可由前后端协定
    fileList.push({
    filename: index / SIZE, fileChunk: file.slice(index, index + SIZE), 'content-length': file.size % SIZE });
    index += SIZE;
}

在这里构造好自己的参数类型后,向后端发起请求。
如果后端支持并发,那就直接发请求,如果不行,就用async/await,配合Promise.all()来一片片的阻塞上传

第三步:容错处理

1.用户手动取消的场景
2.断点续传的场景,例如网页刷新,网络异常等,这个时候,根据记录的分片索引,重新开始上传文件,这样就不需要用户从头开始上传,大大优化用户体验。
3.失败重试的场景,因为每一片文件都是一次请求,难免因为网络情况会导致部分切片失败,这里根据是阻塞上传还是并发上传进行一点区别处理。如果多次失败,就给用户进行提示,因为多次上传失败,要么是因为这个ip的请求间隔过短,被服务器锁了请求,或者服务器崩了,亦或者用户网络不行,这个时候就把选择权让渡给用户本身即可。

写在最后

如果是单个固定请求的重试,不必传参数,写到封装的方法中即可,但分片上传时每次的参数都不同,就需要传入参数。

重试的是一个新的请求,不是上次请求的结果,所以需要封装为一个函数,每次调用重新发起,而不是将上次请求的结果再次传入。

相关文章
|
存储 监控 前端开发
前端文件流、切片下载和上传:优化文件传输效率与用户体验 【最全】
文件传输是一个常见的需求。对于大文件的下载和上传,直接使用传统的方式可能会遇到性能和用户体验方面的问题。幸运的是,前端技术提供了一些高效的解决方案:文件流操作和切片下载与上传。本文将深入探讨这些技术,帮助你理解它们的原理和实现方法,以优化文件传输效率和提升用户体验。
前端文件流、切片下载和上传:优化文件传输效率与用户体验 【最全】
|
1月前
|
缓存 监控 前端开发
在资源加载优化中,如何利用浏览器缓存提升性能?
通过以上这些方法,可以有效地利用浏览器缓存来提升资源加载的性能,减少网络请求次数,提高用户体验和应用的响应速度。同时,需要根据具体的应用场景和资源特点进行灵活调整和优化,以达到最佳的效果。此外,随着技术的不断发展和变化,还需要持续关注和学习新的缓存优化方法和策略。
93 53
|
2月前
|
缓存 前端开发 JavaScript
如何优化前端资源
如何优化前端资源
|
4月前
|
Web App开发 存储 移动开发
大文件上传实现方式比较
大文件上传实现方式比较
87 5
|
4月前
7z压缩测试
7z压缩测试
32 0
|
6月前
|
存储 缓存 前端开发
全面解析:前端超大文件下载的关键技巧与优化策略
全面解析:前端超大文件下载的关键技巧与优化策略
301 1
全面解析:前端超大文件下载的关键技巧与优化策略
|
7月前
|
前端开发 NoSQL Redis
如何实现大文件上传:秒传、断点续传、分片上传
如何实现大文件上传:秒传、断点续传、分片上传
584 0
|
7月前
|
存储 前端开发 安全
如何处理大文件上传
【4月更文挑战第20天】
679 9
|
7月前
大文件上传如何断点续传
该文档描述了一个大文件上传流程,包括:1) 文件分片,2) 计算文件及分片的Hash值以生成唯一标识符,3) 上传分片并检查已上传状态以避免重复,4) 在上传中断时能恢复,5) 服务端合并分片成原始文件,6) 错误处理(如网络中断、服务器故障、上传失败等)并通知用户,最后7) 返回上传成功信息。
|
7月前
|
缓存 自然语言处理 前端开发
JS/CSS体积减少了67%,我们是如何做到的?
JS/CSS体积减少了67%,我们是如何做到的?
70 1