Как загрузить файл, сохранить его в базе данных и отобразить в формате Vue. js?

Question

Мне нужно загрузить файл со своего p c, сохранить его в базе данных и отобразить на странице моего сайта.

Это база данных для файлов:

Schema::create('files', function (Blueprint $table) {
            $table->id();
            $table->string('file');
            $table->unsignedBigInteger('folder_id')
                ->nullable();
            $table->foreign('folder_id')
                ->references('id')
                ->on('folders')
                ->onDelete('cascade');
            $table->timestamps();

            $table->unsignedBigInteger('project_id');
            $table->foreign('project_id')
                ->references('id')
                ->on('projects')
                ->onDelete('cascade');
        });

Это FileController:

  public function index(Project $project, Folder $folder)
    {
        $file = File::where('project_id',$project->id)
        ->where('folder_id', $folder->id)
        ->latest()->get();
        return FileResource::collection($file);
    }

    public function create(CreateFile $request, Project $project, Folder $folder)
    {
        $file = File::create([
            'file' => $this->file,
            'folder_id' => $folder->id,
        ]);
     return new FileResource($file);
    }

Как выглядят компоненты File. vue и UploadFile. vue?