用php如何解決大檔案分片上傳問題
阿新 • • 發佈:2021-07-05
如果上傳的檔案只有小於10M的話,就沒必要考慮這樣的做法,直接在 .ini中更改一下 upload_max_filesize = 10m post_max_size = 10m 這樣就可以了,下面我們來說一說php上傳超大的檔案
前提
首先,上傳超大的檔案,前端要和後端相互配合檔案上傳要使用 ajax 的方法,而不是 form 的 submit的方式
思想
前端把file檔案物件按一定的大小 分割成一定大小的檔案(如按 2M 或 5M來分割),對分割後的檔案,一個個的上傳到後端去,後端接收到分片檔案後,把它們先放到一個臨時的目錄下,在收到前端完成的資料請求的時候,把臨時目錄中的檔案組裝起來成一個新的檔案,儲存後,把臨時目錄下的檔案刪除掉就可以了
程式碼
html
<div class="a"> 上傳<input id="myfile" type="file" name="myfile"/> </div>
這裡要說明一下,沒有使用 submit 上傳,使用 ajax上傳
<script> $(function(){ let myfile = document.getElementById("myfile"); myfile.onchange = function(){ let file = myfile.files[0]; //這裡可以得到上傳的檔案物件 let length = 1024 * 1024 * 5; //這裡是每一個分片的大小 let total_number = Math.ceil(file.size/length) //使用進一法,來確定分片的個數 let start = 0; //分片的初始位置 let end = length; //分片的結束位置 let parr = []; //這裡為promise.all方法準備一個數組; for(let i = 1;i<=total_number;i++){ //這裡開始分片,並且把每一個分片上傳到伺服器 let bolb = file.slice(start,end); //得到一個分片 start = end; //調整下一個分片的起始位置 end = start+length; //調整下一個分片的結束位置 if(end > file.size){ end=file.size; //這裡對最後的一個分片結束位置進行調整 } let formdata = new FormData(); //建立一個FormData物件,準備傳送資料 formdata.append("file",blob); //據分片資料放入 formdata formdata.append("tempfilename",i+"_"+file.name) //同時為這個分片設定一個名稱,其中的 i 可以幫助後端進行排序處理 //formdata組裝好之後,呼叫 pro() 函式,返回一個promise物件,並把它放入 parr 陣列中,方便後面的 promise.all方法使用 parr.push(pro(formadata)); } //以上for 迴圈結束之後,parr陣列中就全部是 分片上傳的 promise的物件了,此時我們使用promise.all 方法,等待所有上傳都成功執行後,再向伺服器傳送一個請求,也就是上傳完成,讓伺服器組裝分片的請求 Promise.all(parr).then(res=>{ if(res.length == parr.length){ //如果返回成功的陣列長度 和 parr的陣列長度相等,說明分片全部上傳成功 //此時對上傳介面再次傳送請求,同時把 上傳的檔名帶上,方便後臺查詢要組裝的分片檔名,因為是請求同一個上傳介面所以,我們還要傳一個 flag=1 表示這是一個數據組裝的請求 $.ajax({ type:"post",url:"http://fastadmin.test/index/upload/getupload",data:{flag:1,filename:file.name},//這裡 flag=1表示上傳完成,請求組裝,filename:表示要組成哪一組檔案分片 success:function(res){ if(res.length == parr.length){ console.log(111); } },fail: function () { reject() } }) } }) } }) //這個函式用來上傳分片檔案,返回的是一個 promise 物件,方便後面使用 promise.all還判斷所有分片是否是上傳成功的 //這裡要說明一下,$.post() 是不可以上傳檔案的,只能用$.ajax() 並且要把 contentType:false和processData:false 帶上 function pro(formData){ return new Promise((resolve,reject)=>{ $.ajax({ type:"post",//後臺上傳檔案的地址 data:formData,contentType: false,//這個不能少,ajax上傳檔案是不能少的 processData: false,ajax上傳檔案必傳 false success:function(res){ rpKGXOgresolve(res) },fail: function () { reject() } }) }) } </script>
以上就是 前端的 核心部分,注釋基本就可以看懂了
php
使用的tp5的框架
public function getUpload(){ $tempdir = APP_PATH."../public/tempdir"; //這裡分片的檔案指定了一個臨時目錄,後面會用到 $flag = input("flag",0);//接收引數flag 如果沒有這個引數就預設為0,如果flag=1,表示要組裝分片 if($flag == 0){ //這裡是上傳分片 $file = request()->file("file"); //接收到這個分片 $tempfilename = input("tempfilename"); //接收到這個分片的名稱,(注意,這個名稱中含有排序資訊) if(!file_exists($tempdir)){ mkdir($tempdir,0755,true); //如果臨時目錄不存在,則建立一個臨時目錄 } $fileinfo = $file->move($tempdir,$tmpfilename); if($fileinfo){ // 這裡把分片的檔案儲存在了臨時目錄中,返回的結果有點簡單,可以根據自已的需求返回相應的資料 return josn(['error'=>0]) }else{ return json(['error'=>1]) http://www.cppcns.com} }else if($flag == 1){ //如果flag 為 1 表示,分片已上傳完成了 $filename = input("filename"); //通過檔名的字串匹配,找上所有的分片,返回一個檔案路徑的陣列 $fileArr = glob($tempdir."/*".$filename); // 這裡的 * 是一個萬用字元,它可以了所以的檔名中 包含的 $filename 的文都找到 //說明一下,$fileArr中的陣列的順序不是我們想要的,所以我們新建一個數組來 整理一下順序 $newfileArr = []; foreach($fileArr as $f){ //在js前端我們把檔案的名稱 前加了 序號+"_",所以我們可以取到檔名之後,通過 下劃線來分開並把序中寫在 key 中 $filebasename = basename($f); //$f是一個個的 路徑,這裡使用 basename 得到檔名 $filebasenamesplit = explode("_",$filebasename); //通過 下劃線分割檔名,$newfileArr[$filebasenamesplit[0]] = $f; //構造了一個新的陣列,其中 陣列的key 就是 順序號,陣列的值就是 分片檔案的路徑 } www.cppcns.com //分片的序號和路徑都準備好了,就可以組裝了 $num = count($newfileArr); //得到的所有分片的個數,為後面使用for 迴圈做準務 //開始使用for 迴圈來組裝 $newfilename = "huangjunhui".$filename; //這裡為組裝後的檔案起一個名字,可隨意 for($i = 1;$i<=$num;$i++){ file_put_contents($newfilename,file_get_contents($newfileArr[$i]),FILE_APPEND); //這裡以追加的方式,把分片檔案都寫入到了一個檔案中,} ...... //刪除臨時檔案中的分片檔案,這裡可以使用 try catch來判斷是否有錯誤 foreach($newfileArr as $fi){ unlink($fi); } //最後給前端返回 儲存的檔名就可以 } }
上面的方法,我本地測試上傳了一個 650M的檔案,只用的 20秒的時間,沒有在伺服器上測試過,大家可以按照這個方法試一下。