当一个文件足够大的时候,通常上传会有两个问题,1:上传大小限制。2:上传速度太慢。
这个时候我们可以考虑分包上传。即是:将一个大文件 分成足够多的小文件分别上传。
php后端1:上传类
<?php namespace App\Support; use Illuminate\Http\Request; use Illuminate\Support\Facades\Storage; class UploadSupport { // 文件 protected $file; // 文件名字 protected $fileName; // 文件大小 protected $fileSize; // 文件后缀名 protected $fileExtension; // 图片允许后缀名 protected $imagesExtension = ['png','jpeg','jpg','gif']; // 文件允许后缀名 protected $docExtension = ['docx','doc','csv','pdf','xls','xlsx']; // 存储文件夹 protected $url = 'default'; // 存储路径 protected $pathUrl = ''; /** * 参数实例化 */ public function requestFile(Request $request){ $this->file = $request->file('part'); $this->fileName = $request->input('name'); $this->filesize = $this->file->getSize(); $this->fileExtension = $this->file->extension(); return $this; } /** * 判断文件存储路径 */ public function pathCheck(){ if(in_array($this->fileExtension,$this->imagesExtension)){ $this->path = 'images'; } if(in_array($this->fileExtension,$this->docExtension)){ $this->path = 'doc'; } $this->existDir(); $this->pathUrl = Storage::path('local').'\\'.$this->url.'\\'.$this->fileName; return $this; } /** * 判断路径是否存在,不存在则创建 */ public function existDir(){ if(!is_dir(Storage::path('local').'\\'.$this->url)){ mkdir(Storage::path('local').'\\'.$this->url); } return true; } /** * 上传文件 */ public function uploadFile(){ if(!file_exists($this->pathUrl)){ return move_uploaded_file($this->file->path(),$this->pathUrl); } return file_put_contents($this->pathUrl,file_get_contents($this->file->path()),FILE_APPEND); } }
php调用:controller
public function upload(Request $request,UploadSupport $uploadSupport){ $upload = $uploadSupport->requestFile($request); $upload->pathCheck()->uploadFile(); return response()->json([ 'code' => 200, 'info' => '上传成功' ]); }
注意要去掉上传表单提交的crsf验证。
前端:
<script src="/js/jquery.min.js"></script> <title>Ajax上传文件进度条显示</title> <script type="text/javascript"> function sendfile(){ const LENGTH=10*1024*1024; var sta=0; var end=sta+LENGTH; var blob=new Blob(); var fd=null; var xhr=null; var pic=document.getElementById('upfile').files[0]; console.log(pic); var name= pic.name; var totalsize=pic.size; var precent=null; while(sta<totalsize){ blob=pic.slice(sta,end); var formData = new FormData(); formData.append("part", blob); formData.append("name", name); $.ajax({ url: '{{route("upload")}}', type: 'POST', cache: false, data: formData, async: false, processData: false, contentType: false, }).done(function(res){ precent=100 * (end/totalsize); if(precent>100){ precent=100; } console.log(Math.round(precent)+'%'); $('#precent').html(Math.floor(precent)+'%'); }).fail(function(res) { });
// xhr=new XMLHttpRequest(); // xhr.open('POST','{{route("upload")}}',false); // fd=new FormData(); // fd.append('part',blob); // fd.append('name',name); // xhr.send(fd); // xhr.upload.onprogress = progressFunction; // var response = JSON.parse(xhr.responseText); // if (response.code == 422){ // alert(response.error); // break; // } // precent=100 * (end/totalsize); // if(precent>100){ // precent=100; // } // console.log(Math.round(precent)+'%'); // document.getElementById('precent').innerHTML=Math.floor(precent)+'%'; sta=end; end=end+LENGTH; } } </script> </head> <body> <input type="file" name="upfile" id="upfile"> <button type="button" onclick="sendfile();">上传</button> <span id="precent" class="precent"></span> </body> </html>