QQ登录

只需要一步,快速开始

APP扫码登录

只需要一步,快速开始

手机号码,快捷登录

手机号码,快捷登录

查看: 5099|回复: 0

[HTML/CSS/JS] 大型文件传输,前后端分别怎么处理?

[复制链接]

等级头衔

积分成就    金币 : 2841
   泡泡 : 1516
   精华 : 6
   在线时间 : 1294 小时
   最后登录 : 2024-11-21

丰功伟绩

优秀达人突出贡献荣誉管理论坛元老

联系方式
发表于 2021-12-14 10:00:53 | 显示全部楼层 |阅读模式
       针对大文件的上传,需要做额外的处理,否则可能会遇到如下问题:
6 U$ ~% N7 R' O% c5 \. d6 @% L
  • 文件过大,超出服务端的请求大小限制(如SpringMVC,默认文件上传最大1MB)。
  • 请求的时间过长,请求超时。
  • 客户端网络不好的话,容易传输中断,必须整个文件重传。  N0 l+ _) c" O, n7 k6 U0 ^
       可以用分片上传的方式来解决。! Q. N8 T( i# x" f
一、前端处理
5 [' c1 A: g* `/ S6 v6 D3 u' Y% o% P       大文件分片上传,是需要前端和后端配合操作的。整体流程是:前端将大文件进行分片,例如一个50MB的文件,分成10片,每个片5MB。然后发10个HTTP请求,将这10个分片数据发送给后端,后端根据分片的下标和Size来往磁盘文件的不同位置写入分片数据,10个分片全部写完后即得到一个完整的文件。' e  d1 }% c* X5 r
1.jpg : L& r' X" ?( @9 o# C+ g; H& A; v
  1. <script>
  2.     const sliceSize = 5 * 1024 * 1024; // 每个文件切片大小定为5MB
  3.     //发送请求
  4.     function upload() {
  5.         const blob = document.getElementById("file").files[0];
  6.         const fileSize = blob.size;// 文件大小
  7.         const fileName = blob.name;// 文件名
  8.         //计算文件切片总数
  9.         const totalSlice = Math.ceil(fileSize / sliceSize);
  10.         // 循环上传
  11.         for (let i = 1; i <= totalSlice; i++) {
  12.             let chunk;
  13.             if (i == totalSlice) {
  14.                 // 最后一片
  15.                 chunk = blob.slice((i - 1) * sliceSize, fileSize - 1);//切割文件
  16.             } else {
  17.                 chunk = blob.slice((i - 1) * sliceSize, i * sliceSize);
  18.             }
  19.             const formData = new FormData();
  20.             formData.append("file", chunk);
  21.             formData.append("md5", md5(blob));
  22.             formData.append("name", fileName);
  23.             formData.append("size", fileSize);
  24.             formData.append("chunks", totalSlice);
  25.             formData.append("chunk", i);
  26.             $.ajax({
  27.                 url: 'http://localhost:8080/chunk/upload',
  28.                 type: 'POST',
  29.                 cache: false,
  30.                 data: formData,
  31.                 processData: false,
  32.                 contentType: false,
  33.                 async: false
  34.             });
  35.         }
  36.     }
  37. </script>
      Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取,也可以转换成 ReadableStream 来用于数据操作。
& C& F1 t4 Y. a7 V# q6 U5 M+ ?* ^       Blob 表示的不一定是JavaScript原生格式的数据。File 接口基于Blob,继承了 blob 的功能并将其扩展使其支持用户系统上的文件。3 F$ r8 b% }6 P( |" G1 b% f
       Blob.size 表示 Blob 对象中所包含数据的大小(字节)。
, ]0 L# C, f1 K! M) ?       Blob.slice(start, end) 返回一个新的 Blob 对象,包含了源 Blob 对象中指定范围内的数据。: i2 v5 n5 I; l5 S" I
       文件进行 MD5 加密 什么意思,做什么用?确保完整性:你将文件生成了MD5摘要,传输文件和MD5码给接收端,接收端接收文件后可以对文件生成MD5码然后与接收到的MD5码对比校验确保文件是完整的而且中途没有被修改。  l6 c$ }1 H8 j, l
二、后端处理
1 z2 Q  J: j+ n: h2 t       后端接收到分片数据后,要根据分片的下标和分片的大小来往文件的指定位置写入分片数据。例如:分片大小为1MB,第一个分片就要往文件的第0个字节开始,写入1048576字节的数据。第二个分片就要往文件的第1048576个字节开始,写入1048576字节的数据,以此类推。待所有的分片数据全部写入完成后,即得到一个完整的文件。
+ k" ]4 A& v2 z$ E  _8 Y8 E 2.jpg
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|手机版|小黑屋|paopaomj.COM ( 渝ICP备18007172号|渝公网安备50010502503914号 )

GMT+8, 2024-11-21 20:53

Powered by paopaomj X3.5 © 2016-2025 sitemap

快速回复 返回顶部 返回列表