laravel与vue前后端分离切片上传

最新推荐文章于 2024-05-22 16:16:38 发布

沐叶丶

最新推荐文章于 2024-05-22 16:16:38 发布

阅读量877

点赞数

分类专栏： PHP laravel 文件上传文章标签： laravel

本文链接：https://blog.csdn.net/weixin_42870994/article/details/105654746

版权

PHP 同时被 3 个专栏收录

5 篇文章 0 订阅

订阅专栏

laravel

4 篇文章 0 订阅

订阅专栏

文件上传

1 篇文章 0 订阅

订阅专栏

laravel与vue前后端分离切片上传

后端代码

public function upload(Request $request)
    {
        $file = $request->file('file');
        $realPath = $file->getRealPath(); //临时文件的绝对路径
        $file_size = $request->input('file_size');
        $blob_num = $request->get('blob_num');
        $total_blob_num = $request->get('total_blob_num');
        $file_name = $request->get('file_name');
        $extension = substr($file_name, strripos($file_name, ".") + 1); //文件扩展名
        $array = [
            'mp4', 'mov', 'avi', 'rmvb'
        ];
        if (!in_array($extension, $array)) {
            return response()->json(['code' =>  '403', 'msg' =>  '文件格式不正确']);
        } else {
            // 存储地址
            $path = 'slice/' . date('Ymd');
            $filename = $path . '/' . $file_name . '_' . $blob_num;
            //上传
            $upload = Storage::disk('public')->put($filename, file_get_contents($realPath));
            //判断是否是最后一块，如果是则进行文件合成并且删除文件块
            if ($blob_num == $total_blob_num) {
                for ($i = 1; $i <= $total_blob_num; $i++) {
                    $blob = Storage::disk('public')->get($path . '/' . $file_name . '_' . $i);
                    file_put_contents(public_path('storage') . '/' . $path . '/' . $file_name, $blob, FILE_APPEND);
                }
                //合并完删除文件块
                for ($i = 1; $i <= $total_blob_num; $i++) {
                    Storage::delete('public/' . $path . '/' . $file_name . '_' . $i);
                }
            }
            if ($upload) {
                return response()->json([
                    'code'  =>  '200'
                ]);
            } else {
                return response()->json([
                    'code'  =>  '400'
                ]);
            }
        }
    }

前端代码

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #progress{
            width: 300px;
            height: 20px;
            background-color:#f7f7f7;
            box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);
            border-radius:4px;
            background-image:linear-gradient(to bottom,#f5f5f5,#f9f9f9);
        }

        #finish{
            background-color: #149bdf;
            background-image:linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);
            background-size:40px 40px;
            display: inline-block;
            height: 20px;
        }
        form{
            margin-top: 50px;
        }
    </style>
</head>
<body>
<p id="progress">
    <span id="finish" style="width: 0%;" progress="0"></span>
</p>
<form action="" enctype="multipart/form-data">
    <input type="hidden" name="MAX_FILE_SIZE" value="2000000000">
    <input type="file" name="file" id="file">
    <input type="button" value="停止" id="stop">
</form>
<script>
    var fileForm = document.getElementById("file");
    var stopBtn = document.getElementById('stop');
    var upload = new Upload();

    fileForm.onchange = function(){
        upload.addFileAndSend(this);
    }

    stopBtn.onclick = function(){
        this.value = "停止中";
        upload.stop();
        this.value = "已停止";
    }

    function Upload(){
        var xhr = new XMLHttpRequest();
        var form_data = new FormData();
        const LENGTH = 1024 * 1024 * 5;
        var start = 0;
        var end = start + LENGTH;
        var blob;
        var blob_num = 1;
        var is_stop = 0

        //对外方法，传入文件对象
        this.addFileAndSend = function(that){
            var file = that.files[0];
            blob = cutFile(file);
            sendFile(blob,file);
            blob_num  += 1;
        }

        //停止文件上传
        this.stop = function(){
            xhr.abort();
            is_stop = 1;
        }

        //切割文件
        function cutFile(file){
            var file_blob = file.slice(start,end);
            start = end;
            end = start + LENGTH;
            return file_blob;
        };

        //发送文件
        function sendFile(blob,file){
            var form_data = new FormData();
            var total_blob_num = Math.ceil(file.size / LENGTH);
            form_data.append('file',blob);
            form_data.append('blob_num',blob_num);
            form_data.append('total_blob_num',total_blob_num);
            form_data.append('file_name',file.name);
            form_data.append('file_size',file.size);
            xhr.open('POST','http://www.laravel7.com/api/upload',false);

            xhr.onreadystatechange  = function () {
                if (xhr.readyState==4 && xhr.status==200)
                {
                    console.log(xhr.responseText);
                }

                var progress;
                var progressObj = document.getElementById('finish');
                if(total_blob_num == 1){
                    progress = '100%';
                }else{
                    progress = Math.min(100,(blob_num/total_blob_num)* 100 ) +'%';
                    // console.log(progress);
                    // console.log('分割');
                }
                progressObj.style.width = progress;
                var t = setTimeout(function(){
                    if(start < file.size && is_stop === 0){
                        blob = cutFile(file);
                        sendFile(blob,file);
                        blob_num  += 1;
                    }else{
                        setTimeout(t);
                    }
                },1000);
            }
            xhr.send(form_data);
        }
    }

</script>
</body>
</html>

沐叶丶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
laravel与vue前后端分离切片上传

laravel与vue前后端分离切片上传后端代码public function upload(Request $request) { $file = $request->file('file'); $realPath = $file->getRealPath(); //临时文件的绝对路径 $file_size = $req...
复制链接

扫一扫