如何上传文件，将其保存在数据库中并在Vue.js中显示？

Question

我不需要从PC上传文件，将其保存在数据库中并显示在我的网站页面上。

这是文件数据库：

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组件的外观如何？