JavaScript大文件上传的处理方法之切片上传

2023年5月27日上午6:14 • JavaScript

JavaScript大文件上传通常会遇到许多问题，如上传速度慢、取消上传无法恢复等。为了解决这些问题，常用的方法是将文件切片后再上传，即切片上传。下面是切片上传的完整攻略。

什么是切片上传？

切片上传，即将大文件分割成多个小文件进行上传。在上传的同时，可以对每个小文件进行 MD5 校验以保证文件的一致性。在上传完所有切片后，服务端再将多个小文件合并成一个完整的文件。这样可以通过并行上传来加快上传速度，同时也减少了上传过程中发生错误的可能性，保证了文件上传的可靠性和完整性。

切片上传的步骤

切片上传的主要步骤如下：

将文件按照指定的大小（一般为 1MB 到 10MB）进行切割，得到多个切片文件。
对于每个切片文件进行 MD5校验，以确保文件的一致性。
将每个切片文件上传至服务端。
服务端接收到所有的切片文件后，将多个切片文件合并成一个完整的文件，完成上传过程。

切片上传的实现

常用的切片上传实现方式有两种：前端 JS 切片上传和后端 PHP 或其他服务器端语言的切片上传。下面分别对两种实现方式进行介绍。

前端 JS 切片上传

前端 JS 切片上传一般使用 WebUploader 插件来实现。WebUploader 可以实现文件的分块上传和断点续传。在使用 WebUploader 时，需要先引入 WebUploader 相关的资源文件，如 CSS 和 JS 文件，并初始化 WebUploader 对象。示例代码如下：

var uploader = WebUploader.create({
    // 上传文件的 Server 地址
    server: 'http://example.com/upload.php',

    // 每个分片的大小
    chunkSize: 1024 * 1024,

    // 分片总数
    chunksTotal: 10,

    // 设置多文件上传
    multiple: true,

    // 选择文件的按钮
    pick: '#filePicker'
});

// 添加文件加入队列事件
uploader.on( 'fileQueued', function( file ) {
    // 显示文件信息
});

// 添加开始上传事件
uploader.on( 'startUpload', function( ) {
    // 显示进度条等信息
});

// 添加上传成功事件
uploader.on( 'uploadSuccess', function( file ) {
    // 显示成功信息
});

// 开始上传
uploader.upload();

在使用 WebUploader 时，还可以设置分片大小，分片总数等参数，以及添加文件加入队列、开始上传、上传成功等事件。

后端 PHP 切片上传

后端 PHP 切片上传实现原理与前端 JS 切片上传类似，也是将大文件分割成多个小文件，上传后再合并成一个完整文件。PHP 提供了 fopen 和 fread 函数，可以方便地实现文件的分块读取和写入。示例代码如下：

$file_path = 'bigfile.mp4';
$chunk_size = 1024 * 1024; // 每个分块大小
$max_tries = 3; // 最大尝试次数
$total_chunks = ceil( filesize( $file_path ) / $chunk_size ); // 计算总分块数

// 循环上传每个分块
for ( $chunk_id = 0; $chunk_id < $total_chunks; $chunk_id++ ) {
    $start_pos = $chunk_id * $chunk_size; // 计算起始位置
    $end_pos = min( $start_pos + $chunk_size, filesize( $file_path ) ); // 计算终止位置

    // 尝试 $max_tries 次上传每个分块
    for ( $try = 0; $try < $max_tries; $try++ ) {
        $fp = fopen( $file_path, 'rb' );
        fseek( $fp, $start_pos );
        $data = fread( $fp, $end_pos - $start_pos );
        fclose( $fp );

        // 上传分块到服务端
        $url = 'http://example.com/upload.php';
        $query = array(
            'filename' => 'bigfile.mp4'
            'chunk_id' => $chunk_id,
            'total_chunks' => $total_chunks,
            'data' => urlencode( base64_encode( $data ) )
        );
        $curl = curl_init();
        curl_setopt( $curl, CURLOPT_URL, $url );
        curl_setopt( $curl, CURLOPT_HEADER, false );
        curl_setopt( $curl, CURLOPT_RETURNTRANSFER, true );
        curl_setopt( $curl, CURLOPT_CONNECTTIMEOUT, 3 );
        curl_setopt( $curl, CURLOPT_POST, true );
        curl_setopt( $curl, CURLOPT_POSTFIELDS, $query );
        curl_exec( $curl );
        curl_close( $curl );
    }
}

// 合并所有分块文件
for ( $chunk_id = 0; $chunk_id < $total_chunks; $chunk_id++ ) {
    $chunk_path = 'bigfile.mp4.chunk.' . $chunk_id;
    $chunk_data = file_get_contents( $chunk_path );
    file_put_contents( $file_path, $chunk_data, FILE_APPEND );
}

// 删除所有分块文件
for ( $chunk_id = 0; $chunk_id < $total_chunks; $chunk_id++ ) {
    $chunk_path = 'bigfile.mp4.chunk.' . $chunk_id;
    unlink( $chunk_path );
}

在 PHP 中，需要循环上传每个分块，使用 curl 将分块文件上传至服务端，并在服务端将所有分块文件合并成一个完整文件。