记一次更改 Dcat-Admin 上传组件直传七牛云

Dcat 文件上传文档

由于dcat文件上传是先传到服务器再转发到七牛云的, 所以会在进度条走完之后还要等待一段时间, 使用体验不好, 且容易超时

琢磨了好久, 贴出来分享一下

// 随机文件名
$filename = md5(uniqid()) . '.mp4';
$disk     = Storage::disk('qiniu');
// 回调信息, Dcat 上传文件需要的报文格式
$callBack = [
    'status' => true,
    'data'   => [
        'id'   => $filename,
        'name' => $filename,
        'path' => $filename,
        'url'  => 'http://' . env('QINIU_DOMAINS') . '/' . $filename,
    ],
];
$policy   = [
    'returnBody' => json_encode($callBack),
];
// 七牛云上传 token
$token    = $disk->uploadToken($filename, 3600, $policy);

$form->file('video1', '上传视频')
    // 更改储存驱动
    ->disk('qiniu')
    // 自动上传
    ->autoUpload()
    // 限制文件上传格式
    ->accept('mp4')
    // 提示文字
    ->help('仅支持MP4格式')
    // 更改文件最大限制
    ->maxSize(512000)
    // 关闭页面删除
    ->removable(false)
    // 设置上传地址
    ->url('http://upload-z2.qiniup.com')
    // 自定义 webuploader 配置
    // Dcat 默认 name 为 _file_
    ->options(['fileVal' => 'file'])
    // 上传事件
    ->on('startUpload', <<<JS
        function () {
            console.log('文件开始上传...', this);
            // 上传文件前附加自定义参数到文件上传接口
            this.uploader.options.formData['token'] = "$token";
            this.uploader.options.formData['fileName'] = "$filename";
            this.uploader.options.formData['key'] = "$filename";
        }
JS
    );