大文件切片上传

最新推荐文章于 2024-07-02 19:17:32 发布

杨一万

最新推荐文章于 2024-07-02 19:17:32 发布

阅读量2.9k

点赞数

文章标签： javascript 前端 java

本文链接：https://blog.csdn.net/yyw_1972088267/article/details/126094408

版权

本文介绍了大文件上传的解决方案，包括文件切片、文件合并、并发控制和断点续传。前端使用JavaScript的Blob.slice()方法进行文件切割，并结合Promise.race实现并发控制，确保浏览器内存安全。通过断点续传策略，确保所有小文件都能成功上传。这是一个需要前后端协作来完成的复杂任务。

摘要由CSDN通过智能技术生成

1.大文件上传的解决思路

1.文件切片：

把一个大文件转换成二进制内容，然后按照一个固定的大小对二进制内容进行切割，得到多个小文件，然后循环上传所有的小文件。在js中，文件File对象是Blob对象的子类，可以使用slice()方法完成对文件的切割；
2.文件合并：

当所有小文件上传完成，调用接口通知后端把所有的文件按编号进行合并，组成大文件；
3.并发控制：

结合Promise.race和异步函数实现,限制多个请求同时并发的数量,防止浏览器内存溢出；
4.断点续传：

把所有上传失败的小文件加入一个数组里面，在所有小文件都上传结束（成功和失败都算结束）之后再上传一次上传失败了的小文件，反复执行这一步，直到所有小文件都上传成功，可以通过递归实现。

2.代码实现 - 前端部分:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=s, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.bootcdn.net/a

最低0.47元/天解锁文章

杨一万

关注

0
点赞
踩
14

收藏

觉得还不错? 一键收藏
2
评论
大文件切片上传

把一个大文件转换成二进制内容，然后按照一个固定的大小对二进制内容进行切割，得到多个小文件，然后循环上传所有的小文件。在js中，文件File对象是Blob对象的子类，可以使用slice()方法完成对文件的切割；把所有上传失败的小文件加入一个数组里面，在所有小文件都上传结束（成功和失败都算结束）之后再上传一次上传失败了的小文件，反复执行这一步，直到所有小文件都上传成功，可以通过递归实现。当所有小文件上传完成，调用接口通知后端把所有的文件按编号进行合并，组成大文件；...
复制链接

扫一扫