用php如何解決大文件分片上傳問題
如果上傳的文件隻有小於10M的話, 就沒必要考慮這樣的做法, 直接在 php.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上傳
javascript
<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", url:"http://fastadmin.test/index/upload/getupload", //後臺上傳文件的地址 data:formData, contentType: false, //這個不能少, ajax上傳文件是不能少的 processData: false, //這個不能少, ajax上傳文件必傳 false success:function(res){ resolve(res) }, fail: function () { reject() } }) }) } </script>
以上就是 前端的 js 核心部分, 註釋基本就可以看懂瞭
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]) } }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 就是 順序號, 數組的值就是 分片文件的路徑 } //分片的序號和路徑都準備好瞭, 就可以組裝瞭 $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秒的時間, 沒有在服務器上測試過,大傢可以按照這個方法試一下。
推薦閱讀:
- Jquery實現異步上傳文件
- 使用AJAX實現上傳文件
- JavaScript 下載鏈接圖片後上傳的實現
- Ajax 文件上傳進度監聽之upload.onprogress案例詳解
- 解析element-ui中upload組件傳遞文件及其他參數的問題