QQ登录

只需要一步,快速开始

APP扫码登录

只需要一步,快速开始

手机号码,快捷登录

泡泡马甲APP 更多内容请下载泡泡马甲手机客户端APP 立即下载 ×
查看: 1792|回复: 0

[HTML/CSS/JS] 用php解决大文件分片上传问题

[复制链接]

等级头衔

积分成就    金币 : 2806
   泡泡 : 1516
   精华 : 6
   在线时间 : 1244 小时
   最后登录 : 2024-5-5

丰功伟绩

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

联系方式
发表于 2021-7-14 23:01:08 | 显示全部楼层 |阅读模式
       如果上传的文件只有小于10M的话, 就没必要考虑这样的做法, 直接在 php.ini中更改一下 upload_max_filesize = 10m,post_max_size = 10m 这样就可以了, 下面来说一说php上传超大的文件。+ ]3 t; P2 M9 |
一、前提
8 V4 U) |" p4 Z3 N1 f       首先, 上传超大的文件,前端要和后端相互配合文件上传要使用 ajax 的方法,而不是 form 的 submit的方式。2 P5 u$ e( |% k1 W2 U5 h
二、思想. m' e# f0 _* w
       前端把file文件对象按一定的大小分割成一定大小的文件(如按 2M 或 5M来分割),对分割后的文件 一个个的上传到后端去,后端接收到分片文件后把它们先放到一个临时的目录下,在收到前端完成的数据请求的时候,把临时目录中的文件组装起来成一个新的文件,保存后,把临时目录下的文件删除掉就可以了。
) i& c" y3 B% v) ~1 _5 \三、代码3 x+ G" d( N8 w
html:
$ V' J5 q6 Z' h9 G
  1. <div class="a">
  2.           上传<input id="myfile" type="file" name="myfile"/>
  3.    </div>
      这里要说明一下,没有使用 submit 上传,而是使用 ajax上传。
2 m4 L& d7 Z  \javascript:
$ g+ n4 ?' i7 d# X, E) h
  1. <script>
  2.         $(function(){
  3.                 let myfile = document.getElementById("myfile");
  4.                 myfile.onchange = function(){
  5.                         let file = myfile.files[0];                //这里可以得到上传的文件对象
  6.                         let length = 1024 * 1024 * 5;   //这里是每一个分片的大小
  7.                         let total_number = Math.ceil(file.size/length) //使用进一法, 来确定分片的个数
  8.                         let start = 0;                        //分片的初始位置
  9.                         let end = length;                //分片的结束位置
  10.                         let parr = [];         //这里为promise.all方法准备一个数组;
  11.                         for(let i = 1;i<=total_number;i++){
  12.                                 //这里开始分片, 并且把每一个分片上传到服务器
  13.                                 let bolb = file.slice(start,end);  //得到一个分片
  14.                                 start = end;                                //调整下一个分片的起始位置
  15.                                 end = start+length;                        //调整下一个分片的结束位置
  16.                                 if(end > file.size){
  17.                                         end=file.size;                //这里对最后的一个分片结束位置进行调整
  18.                                 }
  19.                                 let formdata = new FormData();  //创建一个FormData对象, 准备传送数据
  20.                                 formdata.append("file",blob);   //据分片数据放入 formdata
  21.                                 formdata.append("tempfilename",i+"_"+file.name)  //同时为这个分片设置一个名称, 其中的 i 可以帮助后端进行排序处理
  22.                                 
  23.                                 //formdata组装好之后, 调用 pro() 函数, 返回一个promise对象, 并把它放入 parr 数组中, 方便后面的 promise.all方法使用
  24.                                 parr.push(pro(formadata));
  25.                         }
  26.                         //以上for 循环结束之后,  parr数组中就全部是  分片上传的 promise的对象了, 此时我们使用promise.all 方法, 等待所有上传都成功执行后, 再向服务器发送一个请求, 也就是上传完成, 让服务器组装分片的请求
  27.                         Promise.all(parr).then(res=>{
  28.                                 if(res.length == parr.length){   //如果返回成功的数组长度 和 parr的数组长度相等,说明分片全部上传成功
  29.                                         //此时对上传接口再次发送请求, 同时把 上传的文件名带上, 方便后台查找要组装的分片文件名, 因为是请求同一个上传接口所以, 我们还要传一个 flag=1  表示这是一个数据组装的请求
  30. $.ajax({
  31.                     type:"post",
  32.                     url:"http://fastadmin.test/index/upload/getupload",
  33.                     data:{flag:1,filename:file.name},  //这里 flag=1表示上传完成,请求组装, filename:表示要组成哪一组文件分片
  34.                     success:function(res){
  35.                         if(res.length == parr.length){
  36.                             console.log(111);
  37.                         }
  38.                     },
  39.                     fail: function () {
  40.                         reject()
  41.                     }
  42.                 })
  43.                                 }
  44.                         })
  45.                 }
  46.         })
  47.         //这个函数用来上传分片文件, 返回的是一个 promise 对象, 方便后面使用  promise.all还判断所有分片是否是上传成功的
  48.         //这里要说明一下, $.post() 是不可以上传文件的, 只能用$.ajax() 并且要把 contentType:false和processData:false 带上
  49.     function pro(formData){
  50.         return new Promise((resolve,reject)=>{
  51.             $.ajax({
  52.                 type:"post",
  53.                 url:"http://fastadmin.test/index/upload/getupload",  //后台上传文件的地址
  54.                 data:formData,
  55.                 contentType: false,    //这个不能少, ajax上传文件是不能少的
  56.                 processData: false,           //这个不能少, ajax上传文件必传 false
  57.                 success:function(res){
  58.                     resolve(res)
  59.                 },
  60.                 fail: function () {
  61.                     reject()
  62.                 }
  63.             })
  64.         })
  65.     }               
  66. </script>
      以上就是前端的 js 核心部分,有注释基本可以看懂。
! {3 s: q+ o& O" A( B* Q% `8 {$ fphp:  B( S0 z* d- U/ M) g( }
使用的tp5的框架
: I2 I* D6 V9 ]) g
  1. public function getUpload(){
  2.         $tempdir = APP_PATH."../public/tempdir"; //这里分片的文件指定了一个临时目录, 后面会用到
  3.         $flag = input("flag",0);//接收参数flag 如果没有这个参数就默认为0, 如果flag=1,表示要组装分片
  4.         if($flag == 0){
  5.                 //这里是上传分片
  6.                 $file = request()->file("file");  //接收到这个分片
  7.                 $tempfilename = input("tempfilename");  //接收到这个分片的名称, (注意,这个名称中含有排序信息)
  8.                 if(!file_exists($tempdir)){
  9.                         mkdir($tempdir,0755,true);                //如果临时目录不存在,则创建一个临时目录
  10.                 }
  11.                 $fileinfo = $file->move($tempdir,$tmpfilename);
  12.                 if($fileinfo){  // 这里把分片的文件保存在了临时目录中, 返回的结果有点简单, 可以根据自已的需求返回相应的数据
  13.                         return josn(['error'=>0])
  14.                 }else{
  15.                         return json(['error'=>1])
  16.                 }
  17.         }else if($flag == 1){
  18.                 //如果flag 为 1 表示, 分片已上传完成了
  19.                 $filename = input("filename");
  20.                 //通过文件名的字符串匹配, 找上所有的分片, 返回一个文件路径的数组
  21.                 $fileArr = glob($tempdir."/*".$filename);
  22.                 // 这里的 * 是一个通配符, 它可以了所以的文件名中 包含的 $filename 的文都找到
  23.                 //说明一下, $fileArr中的数组的顺序不是我们想要的 , 所以我们新建一个数组来 整理一下顺序
  24.                 $newfileArr = [];
  25.                 foreach($fileArr as $f){
  26.                 //在js前端我们把文件的名称 前加了 序号+"_", 所以我们可以取到文件名之后, 通过 下划线来分开并把序中写在 key 中
  27.                         $filebasename = basename($f); //$f是一个个的 路径, 这里使用 basename 得到文件名
  28.                         $filebasenamesplit = explode("_",$filebasename); //通过 下划线分割文件名,
  29.                         $newfileArr[$filebasenamesplit[0]] = $f;    //构造了一个新的数组, 其中 数组的key 就是 顺序号, 数组的值就是 分片文件的路径
  30.                 }
  31.                 //分片的序号和路径都准备好了, 就可以组装了
  32.                 $num = count($newfileArr);  //得到的所有分片的个数, 为后面使用for 循环做准务
  33.                 //开始使用for 循环来组装
  34.                 $newfilename = "huangjunhui".$filename; //这里为组装后的文件起一个名字, 可随意
  35.                 for($i = 1;$i<=$num;$i++){
  36.                         file_put_contents($newfilename,file_get_contents($newfileArr[$i]),FILE_APPEND);
  37.                         //这里以追加的方式, 把分片文件都写入到了一个文件中,
  38.                 }
  39.                 ......
  40.                 //删除临时文件中的分片文件, 这里可以使用 try catch来判断是否有错误
  41.                 foreach($newfileArr as $fi){
  42.                         unlink($fi);
  43.                 }
  44.                 //最后给前端返回 保存的文件名就可以
  45.         }
  46. }
      上面的方法本地测试上传了一个 650M的文件,只用的20秒的时间,没有在服务器上测试过,大家可以按照这个方法试一下。4 F- Z! C. s2 r: y
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

GMT+8, 2024-5-13 23:09

Powered by paopaomj X3.4 © 2016-2024 sitemap

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