有没有办法在Angular 5中为文件上传创建一个拖放输入？

npm install --save @angular/material @angular/cdk

import { DragDropModule } from '@angular/cdk/drag-drop';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';

@NgModule({
  imports: [
    // other imports
    DragDropModule,
    MatButtonModule,
    MatIconModule
  ],
  // other module properties
})
export class AppModule { }

<div
  cdkDrag
  (cdkDragEnded)="onDragEnded($event)"
  class="drag-drop-container"
>
  <input
    type="file"
    (change)="onFileSelected($event.target.files)"
    class="file-input"
  />
  <p>将文件拖放到此处</p>
</div>

import { Component } from '@angular/core';

@Component({
  selector: 'app-file-upload',
  templateUrl: './file-upload.component.html',
  styleUrls: ['./file-upload.component.css']
})
export class FileUploadComponent {
  onFileSelected(files: FileList) {
    // 处理文件选择逻辑
  }

  onDragEnded(event: any) {
    // 处理拖放结束逻辑
  }
}