基于Php Laravel的大文件HTML5分块上传

大文件上传时，往往需要的处理时间会很长，同时可能会出现用户中途取消，网络断开等问题。使用HTML5的切片上传技术会有效改善大文件上传时的用户体验，基于Php Laravel后端框架和AetherUpload-Laravel这个组件，本文尝试去建立一个覆盖前后端的大文件上传方案。

AetherUpload-Laravel插件GitHub仓库

环境

• Php Laravel 5.8
• AetherUpload-Laravel 2.0

前端配置

Tips：前端代码中还涉及到了Bootstrap, jasny-bootstrap, Creative-Tim Argon的CSS主题，不影响本文相关的配置代码逻辑

<form ...Your Route config set here...>
<Input ...Other Input...>
<Input ...Other Input...>
<Input ...Other Input...>

<!-- If this part is in edit page I will show the uploaded video, else will show the upload component
The video object I store in database will be like: Video(id, path, screenshot, introduciton, content...) -->

@if($path === '')
<div class="col-xl-6 form-group{{ $errors->has('path') ? ' has-danger' : '' }}" id="aetherupload-wrapper">
    <!--组件最外部需要一个名为aetherupload-wrapper的id，用以包装组件-->
    <label class="form-control-label">上传视频</label>

    <div class="controls">
        <div class="fileinput fileinput-new input-group" data-provides="fileinput"
            style="box-shadow: 0 1px 3px rgba(50, 50, 93, .15), 0 1px 0 rgba(0, 0, 0, .02);">
            <div class="form-control form-control-alternative" data-trigger="fileinput">
                <span class="fileinput-filename"></span>
            </div>
            <span class="input-group-append">

                <span class="input-group-text btn-file" style="border: 0px;">
                    <span class="fileinput-new">选择视频</span>
                    <span class="fileinput-exists">更换视频</span>
                    <input type="file" id="aetherupload-resource"
                        onchange="console.log('更换视频');aetherupload(this).setGroup('file').setSavedPathField('#aetherupload-savedpath').setPreprocessRoute('/aetherupload/preprocess').setUploadingRoute('/aetherupload/uploading').setLaxMode(false).success(someCallback).upload()"/>
                </span>
            </span>
        </div>
        <!--需要一个名为aetherupload-resource的id，用以标识上传的文件，setGroup(...)设置分组名，setSavedPathField(...)设置资源存储路径的保存节点，setPreprocessRoute(...)设置预处理路由，setUploadingRoute(...)设置上传分块路由，setLaxMode(...)设置宽松模式，success(...)可用于声名上传成功后的回调方法名。默认为选择文件后触发上传，也可根据需求手动更改为特定事件触发，如点击提交表单时-->
        <div class="progress " style="height: 6px;margin-bottom: 2px;margin-top: 10px;width: 200px;">
            <div class="progress-bar bg-primary" id="aetherupload-progressbar"
                style="    background-color:#419DF9!important;"></div>
            <!--需要一个名为aetherupload-progressbar的id，用以标识进度条-->
        </div>

        <span style="font-size:12px;color:#aaa;" id="aetherupload-output"></span>
        <!--需要一个名为aetherupload-output的id，用以标识提示信息-->
        <input type="hidden" name="path" id="aetherupload-savedpath" value="{{ $path }}">
        <!--需要一个自定义名称的id，以及一个自定义名称的name值, 用以标识资源储存路径自动填充位置，默认id为aetherupload-savedpath，可根据setSavedPathField(...)设置为其它任意值-->
    </div>
    <div id="result"></div>
</div>
@else
    <div class="col-xl-6 form-group">
        <video width="500" height="277" controls>
        <source src="http://127.0.0.1:8000/admin/play/file_201908_4fa4366cd697d28f654254ba599eaeb9.mov" type="video/mp4">
      </video>
    </div>
@endif


<input ...Other Input...>
<input ...Other Input...>
<input ...Other Input...>

</form>

<!-- JS Part Code -->
<script src="{{ URL::asset('vendor/aetherupload/js/spark-md5.min.js') }}"></script>
<!--（可选）需要引入spark-md5.min.js，用以支持秒传功能-->
<script src="{{ URL::asset('vendor/aetherupload/js/aetherupload.js') }}"></script>
<!--需要引入aetherupload.js-->
<script>
    // success(someCallback)中声名的回调方法需在此定义，参数someCallback可为任意名称，此方法将会在上传完成后被调用
    // 可使用this对象获得resourceName,resourceSize,resourceTempBaseName,resourceExt,groupSubdir,group,savedPath等属性的值
    someCallback = function () {
        // Example Code
        $('#result').append(
            '<p>执行回调 - 文件已上传，原名：<span >' + this.resourceName + '</span> | 大小：<span >' + parseFloat(this
                .resourceSize / (1000 * 1000)).toFixed(2) + 'MB' + '</span> | 储存名：<span >' + this.savedPath
            .substr(this.savedPath.lastIndexOf('_') + 1) + '</span></p>'
        );
        // Allow reupload video 允许再次上传新视频覆盖原有的
        $('#aetherupload-resource').attr('disabled', false);
        // Update Video info 像后台更新本次上传的视频信息
        var video_path = $('#aetherupload-savedpath').val();
        var id = $('#video_id').val();
        var path = "/admin/videos/" + id + '/path';

        $.ajax({
            type: "put",
            url: path,
            data: {'path' : video_path},
            success: function (data) {
                // location.reload();
                // toastr.success('Success');
            }
        });
    }

</script>

后端配置

public function updatePath(Request $request, $id){
        $video = Video::find($id);

        <!-- Delete the old video first -->
        if($video->path !== ''){
            \AetherUpload\Util::deleteResource($video->path);
        }

        $video->path = $request->path;
        if($video->save()){
            return redirect()->back()->withInput()->with('message', '更新视频成功');
        }else{
            return redirect()->back()->withInput()->withErrors('更新视频失败');
        };

    }

其余的一些操作的配置：

• 获得已上传资源的访问链接

  1. (手动)通过请求路由”域名(分布式启用时应当为储存服务器的域名)/aetherupload/display/“+file1 访问file1
  2. (自动)通过全局帮助方法 aetherupload_display_link(file1) 访问file1
  3. (自动)通过工具类方法 AetherUploadUtil::getDisplayLink(file1) 访问file1

• 获得已上传资源的下载链接

  1. (手动)通过请求路由”域名(分布式启用时应当为储存服务器的域名)/aetherupload/download/“+file1+”/newname” 下载file1
  2. (自动)通过全局帮助方法 aetherupload_download_link(file1,newname) 下载file1
  3. (自动)通过工具类方法 AetherUploadUtil::getDownloadLink(file1,newname) 下载file1
• 删除资源

AetherUploadUtil::deleteResource($savedPath); //删除对应的资源文件
AetherUploadUtil::deleteRedisSavedPath($savedPath); //删除对应的redis秒传记录。