PHP 之分片上传

一、效果图

二、前端

复制代码

<template>
    <div>
        <el-upload ref="uploadRef" 
        :show-file-list="false" 
        class="upload" 
        :auto-upload="false" 
        :on-change="handleChange"
        :limit="1" 
        :http-request="test"
        :on-exceed="test"
        >
            <el-button type="primary">文件上传</el-button>
        </el-upload>

        <el-progress :percentage="percent" :stroke-width="10" :status="status" />
    </div>
</template>

<script setup>
    import {
        getCurrentInstance,
        ref
    } from 'vue';
    
    const {proxy} = getCurrentInstance()
    const uploadRef = ref()
    
    const percent = ref(0)
    const status = ref('')

    const handleChange = (uploadFile, uploadFiles) => {
        console.log(uploadFile, uploadFiles, uploadFile.raw instanceof File)
        status.value = ''
        percent.value = 0
        
        const file = uploadFile.raw;
        const CHUNK_SIZE = 1024 * 1024 * 5; // 分片大小，例如5MB
        const CHUNKS = Math.ceil(file.size / CHUNK_SIZE); // 总分片数
        let uploaded = 0; // 已上传的分片数
        console.log(CHUNKS);

        const uploadChunk = async (chunkIndex) => {
            const start = chunkIndex * CHUNK_SIZE;
            const end = (chunkIndex + 1) * CHUNK_SIZE;
            const chunk = file.slice(start, end);
            const formData = new FormData();
            formData.append('file', chunk); // 注意：服务器端需要处理这种分片上传的情况
            formData.append('chunkIndex', chunkIndex); // 添加分片索引信息
            formData.append('totalChunks', CHUNKS); // 添加总分片数信息
            formData.append('fileName', file.name); // 可选，添加文件名信息
            
            console.log(chunk, formData)
            let res = await proxy.$http.post('upload.php', formData)
            console.log(res)
            if(res.code == 0) {
                uploaded++;
                updateProgress();
                //更新进度条
                if(chunkIndex + 1 == CHUNKS) {
                    console.log('上传成功 ==> ', res.fileInfo)
                    // alert(res.msg)
                    status.value = 'success';
                    uploadRef.value.clearFiles()
                }else{
                    uploadChunk(uploaded)
                }
            }else{
                console.log(res.msg);
            }
        }
        
        const updateProgress = () => {
            const percentVal = parseInt(parseFloat(uploaded / CHUNKS).toFixed(2) * 100)
            percent.value = percentVal
        }
        
        uploadChunk(0);
    }
    
    const test = (file) => {
        console.log(file)
    }
</script>

<style>
</style>

三、后端

复制代码

<?php

// var_dump($_FILES);
$chunkIndex = intval($_POST['chunkIndex']);
$fileName = trim($_POST['fileName']);
$totalChunks = intval($_POST['totalChunks']);

$ext = pathinfo($fileName, PATHINFO_EXTENSION);
$temp_name = md5($fileName).'_{0}.txt';
$uploadFile = str_replace('{0}', $chunkIndex, $temp_name);
if(move_uploaded_file($_FILES['file']['tmp_name'], $uploadFile)) {
    //合并文件
    $f = md5($fileName).'.'.$ext;
    if($chunkIndex + 1 == $totalChunks){
        $filesize = 0;
        for($i = 0; $i < $totalChunks; $i++){
            $file = str_replace('{0}', $i, $temp_name);
            if(file_exists($file)){
                //合并文件
                $content = file_get_contents($file);
                $filesize += strlen($content);
                file_put_contents($f, $content, FILE_APPEND);
                unlink($file);
            }
        }
        $fileInfo = array(
            'filename' => $fileName,
            'filesize' => $filesize,
            'path' => $f,
            'fileext' => $ext,
        );
        die(json_encode(array('code' => 0, 'msg' => '上传成功', 'fileInfo' => $fileInfo)));
    }
    die(json_encode(array('code' => 0, 'msg' => '上传成功')));
}else{
    die(json_encode(array('code' => 1, 'msg' => '上传失败')));
}