catthecreator/laravel-resumablejs

非常灵活的块上传和异步上传集成

dev-master 2024-08-10 12:35 UTC

This package is auto-updated.

Last update: 2024-09-10 12:54:23 UTC


README

这个Laravel包实现了使用上传处理器进行块上传的功能。思路是,你有一个单独的上传路由,并将处理器名称传递给它来初始化上传。然后该处理器处理授权和文件处理。上传本身由全局的上传控制器管理。

安装

通过composer进行安装

composer require le0daniel/laravel-resumablejs

由于该包包含一些迁移,请运行它们。

artisan migrate

该包包含配置文件,因此你应该使用以下命令发布包:

artisan vendor:publish

安装

resumablejs.php配置文件中,你需要声明要使用此包的处理器。处理器必须扩展le0daniel\LaravelResumableJs\Contracts\UploadHandler接口。

要实现的方法相当直接。

JavaScript

Resumable.js的要求的简单实现:axiosresumable.js

设置forceChunkSize参数非常重要,因为每个块都必须检查是否具有确切的块大小(除非是最后一个)。如果不是,则该块将被标记为无效并拒绝。此外,块大小必须与laravel配置(resumablejs.php)中定义的相同

const r = new Resumable({
    target:'/upload',
    query: file => {
        if(file.token){
            return {token:file.token};
        }
        return {};
    },
    chunkSize: (10 * 1024 * 1024),
    forceChunkSize: true
});

一旦添加了文件,你需要使用处理器名称调用init方法以获取上传令牌,然后使用该令牌执行实际的上传。

r.on('fileAdded', file => {
    // Pause the file
    file.pause();

    // Make the init call
    axios.post('/upload/init',{
        handler:'basic', // name defined in config
        size: file.size,
        type: file.file.type,
        name: file.fileName
    }).then(response => {
        if(response.data.data.token){
            // Save the token to the file
            file.token = response.data.data.token;
            file.pause(false);
            r.upload();
        }
        else{
            file.cancel();
        }
    }).catch(error => {
        file.cancel();
    });
});

一旦上传完成,我们将调用complete端点来处理文件

r.on('fileSuccess', file => {
    axios.post('/upload/complete',{
        token: file.token
    }).then(response => {
        console.log(response.data);
    })
})

完成了,现在你可以分块上传大文件并轻松处理它们。