前端h5文件切片上傳,后臺(tái)php接收切片并合并

whinc 發(fā)布于2019-07-01 10:54 / 2182人閱讀

摘要：網(wǎng)上很多文件切片上傳的文章看了很多最終自己總結(jié)了下主要思路如下需要實(shí)現(xiàn)的功能前端多文件上傳前端文件切片并命名文件同步上傳切片同步上傳后端接受切片并根據(jù)文件名稱保存至文件夾后端判斷是否是最后一個(gè)切片合并切片用到的技術(shù)文件切片切片上傳請(qǐng)求參數(shù)

網(wǎng)上很多文件切片上傳的文章, 看了很多, 最終自己總結(jié)了下, 主要思路如下：

1. 需要實(shí)現(xiàn)的功能

前端多文件上傳

前端文件切片, 并命名uuid

文件同步上傳, 切片同步上傳

后端接受切片并根據(jù)文件名稱保存至文件夾

后端判斷是否是最后一個(gè)切片,合并切片

2.用到的技術(shù)

h5文件切片

切片上傳請(qǐng)求參數(shù):

filename: file-5bad6aab-cf7d-bfdb-356a-36d7b4ab1e1e.jpg
fragname: frag-1e0d1311-2369-317b-262e-04a9f427ea8c
file: (binary)
fragindex: 0
total: 2

es6 async await

php monolog composer包

3. 開(kāi)始寫代碼 3.1 前端

html:

點(diǎn)擊上傳, 獲取所有的文件,并處理文件

 $("#upload").click(function () {
            var file = document.getElementById("file");
            //獲取所有文件
            var fileList = file.files;

            //操作文件
            handleFiles(fileList);

            return false;
        });

處理文件方法:
文件上傳同步,上傳文件

async function handleFiles(fileList) {
            var i = 0;
            while (i
處理上傳文件切片,并上傳
//upload file
        async function uploadFile(targetFile,index) {
            //console.log(targetFile);
            var tmp = targetFile.name.split(".");
            var filename = "file-"+guid() + "." + tmp[tmp.length-1] ;
            var fileSize = targetFile.size;
            var total =  Math.ceil( fileSize / pieceSize );

            await handle();

            async function handle() {
                var i = 0;
                var start = end = 0;
                while(i < total){
                    end = start + pieceSize;

                    if(end >= fileSize){
                        end = fileSize;
                    }

                    console.log( "文件的index:" + index+ "| 處理文件切片 i:"+i , "start:" + start,  "end:" + end );
                    var frag = targetFile.slice(start, end);

                    await send( filename,frag,i , total ,function () {
                        console.log( "文件的index:" + index+ "| 切片上傳完成 回調(diào) res111",i)
                    });
                    start = end;
                    i++;
                }
            }
        }

        //send
        async function send(filename,frag,index,total,cb) {

            var formData = new FormData();
            var fragname = "frag-" + guid();

            formData.append("filename",filename);
            formData.append("fragname",fragname);
            formData.append("file",frag);
            formData.append("fragindex",index);
            formData.append("total",total);

            await $.ajax({
                url: url,
                type: "POST",
                cache: false,
                data: formData,
                processData: false,
                contentType: false
            }).done(function (res) {
                //console.log("res:" + index);
                cb && cb();
            }).fail(function (res) {
            });
        }
3.2 后臺(tái)php
pushHandler(new StreamHandler(__DIR__."/my_app.log", Logger::DEBUG));

$file = $_FILES["file"];

//打印文件
$log->info("切片",$file);

$orgFileName = $_POST["filename"];
$log->info("orgFileName:" . $orgFileName);

//獲取文件名稱
$filename = explode("." , $_POST["filename"]);

//獲取文件后綴
$ext = $filename[1];
$filename = $filename[0];

$log->info("ext:" . $ext);

//新建frag 文件夾, 以filename為命名方式
if(!file_exists(FRAGPATH.$filename)){
    mkdir(FRAGPATH.$filename);
}

//將接收到的frag文件移入file文件夾中
//$frag_path = SITE_ROOT."/dir/".$filename."/".iconv("UTF-8","gbk",basename($_FILES["file"]["tmp_name"]));
$frag_path = FRAGPATH.$filename ."/". $_POST["fragname"];
try{
    if(move_uploaded_file($_FILES["file"]["tmp_name"] , $frag_path)){
        echo response(["status" => "上傳成功"]);
    }
}catch (Exception $e){
    throw new Exception();
}

//合并file文件夾中的frag為最終文件
if( $_POST["fragindex"] == $_POST["total"] -1 ){
    $blob = "";
    $fragDir = FRAGPATH.$filename;

    $handler = @opendir($fragDir);

    //獲取filename
    while ( ( $fragFileName = readdir($handler) ) !== false ){
        $fp = fopen( FILEPATH . "/" . $orgFileName,"ab" );
        // 務(wù)必使用!==，防止目錄下出現(xiàn)類似文件名“0”等情況
        if ($fragFileName !== "." && $fragFileName !== "..")
        {
            //方式一:
            //$blob .= file_get_contents( $fragDir . "/" . $fragFileName );

            //方式二:
            $value = $fragDir . "/" . $fragFileName;
            $handle = fopen($value,"rb");
            fwrite($fp,fread($handle,filesize($value)));
            fclose($handle);

            //刪除切片文件
            @unlink($fragDir . "/" . $fragFileName);
        }
    }

    //合并切片到文件
    //file_put_contents( FILEPATH. "/" . $filename . ".". $ext , $blob );

    //刪除切片文件夾
    @rmdir($fragDir);
}
最終文件上傳成功刪除切片文件夾下的切片

完整代碼地址：https://github.com/lilili001/...