其他分享
首页 > 其他分享> > 上传大文件之分包操作-js处理

上传大文件之分包操作-js处理

作者:互联网

当一个文件足够大的时候,通常上传会有两个问题,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>

 

标签:return,precent,js,分包,file,var,path,上传
来源: https://www.cnblogs.com/wish-yang/p/15206612.html