PHP에서 Laravel 8, UPPY 및 TUS로 재개 가능한 파일 업로드 구현

다음 가이드는 웹 앱에 대한 좀 더 멋진 파일 업로드를 구현하는 데 도움이 됩니다.

요구 사항

Laravel : Laravel은 표현력이 뛰어나고 우아한 구문을 사용하는 웹 응용 프로그램 프레임워크입니다. 지원되는 버전 > 5.x.x . 이 가이드에서 사용하는 버전은 Laravel 8입니다.

Uppy : 세련된 모듈식 오픈 소스 JavaScript 파일 업로더입니다.



Tus : 재개 가능한 파일 업로드를 위한 개방형 프로토콜입니다.

Tus-PHP : tus 재개 가능 업로드 프로토콜 v1.0.0용 순수 PHP 서버 및 클라이언트입니다.

Redis : 데이터베이스, 캐시 및 메시지 브로커로 사용되는 오픈 소스(BSD 라이센스), 메모리 내 데이터 구조 저장소입니다.

지도 시간

1. NPM으로 Uppy 및 지원되는 플러그인(Dashboard, Tus)을 설치합니다.

npm install uppy

npm install @uppy/dashboard

npm install @uppy/tus

블레이드 파일에 파일 업로드 요소를 생성합니다. 이 예에서는 버튼을 사용하고 있습니다.

<button  type='button' class='btn btn-success btn-sm' id='file_upload' name='file_upload'>Upload File</button>

3. 파일을/tus 끝점에 게시하려면 CSRF-TOKEN을 추가해야 합니다. Uppy.js에 전달할 blade.php에 토큰을 보관할 메타 태그를 만듭니다.

<meta name="csrf-token" content={"{ csrf_token() }}">

4. JavaScript 파일에서 Uppy 구성을 생성합니다.

import Uppy from '@uppy/core';
import Tus from '@uppy/tus'
import Dashboard from '@uppy/dashboard';


const uppy = new Uppy({
    debug: false,
    autoProceed: false,
    restrictions: {
      maxFileSize: 1000000,
      maxNumberOfFiles: 1,
      allowedFileTypes: ['image/*'],
    }
})
.use(Dashboard, {
target: 'body',
  trigger: '#file_upload',
  closeAfterFinish: true,
  browserBackButtonClose: false,
  showProgressDetails: true,
})
.use(Tus, {
    endpoint: '/tus', // use your tus endpoint here
    retryDelays: [0, 1000, 3000, 5000],
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
})

캐시 관리를 위해 Redis가 필요합니다. 계속해서 시스템에 Redis를 설치하려면 guide을 따르십시오. Windows 시스템을 실행 중인 경우 시작하기 전에 Linux용 Windows 하위 시스템을 설치해야 합니다. 우분투 배포판을 추천합니다.

curl -fsSL https://packages.redis.io/gpg | sudo gpg --dearmor -o /usr/share/keyrings/redis-archive-keyring.gpg

echo "deb [signed-by=/usr/share/keyrings/redis-archive-keyring.gpg] https://packages.redis.io/deb $(lsb_release -cs) main" | sudo tee /etc/apt/sources.list.d/redis.list

sudo apt-get update
sudo apt-get install redis

Redis 서버 시작

redis-server

Redis 서버가 원활하게 실행 중이고 연결할 수 있는지 확인하십시오.

redis-cli ping

이제 Ankit Pokhrel의 Tus-PHP와 함께 모든 것을 연결하겠습니다. Composer로 Tus-PHP 추가

composer require ankitpokhrel/tus-php

서비스 공급자(예: TusServiceProvider)를 만들고 구성 config/app.php에 추가합니다.

php artisan make:provider TusServiceProvider

Laravel 통합 가이드의 샘플 코드로 공급자를 업데이트합니다. Laravel의 CSRF 검증에서 서버 엔드포인트를 제외할 필요는 없습니다. 그것은 보안 위험이며 헤더에 전달하여 처리되었습니다. 또한 저장소에 업로드 폴더를 만드는 것을 잊지 마십시오.

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use TusPhp\Tus\Server as TusServer;


class TusServiceProvider extends ServiceProvider
{
    /**
     * Register services.
     *
     * @return void
     */
    public function register()
    {
        //
        $this->app->singleton('tus-server', function ($app) {
            $server = new TusServer('redis');

            $server->setApiPath('/tus');
            $server->setUploadDir(storage_path('app/public/uploads'));

            return $server;
        });

    }

    /**
     * Bootstrap services.
     *
     * @return void
     */
    public function boot()
    {
        //
    }
}

요청을 처리할 경로에/tus 끝점을 추가합니다.

Route::any('/tus/{any?}', function () {
    return app('tus-server')->serve();
})->where('any', '.*');

그게 전부입니다. 사용자는 네트워크 오류가 발생하거나 브라우저를 닫은 후 파일 업로드를 재개할 수 있습니다. 도움이 필요하면 comments을 누르십시오.