angular - 使用 Angular 拖放文件

Question

我是 Angular 和 typescript 的初学者。我的要求是我必须使用 Angular 通过拖放来选择单个/多个视频文件。

为此，我引用了 https://stackblitz.com/edit/angular-rksspi?file=src%2Fapp%2Fapp.component.ts

在这里，我想在拖拽区看到拖放的文件。如何做到这一点？

Answer 1

这取决于你看文件的意思...但基本上，您应该将拖动的文件保存到类属性中并将其显示在您的 html 中:

应用程序组件.ts

import { Component, OnInit, HostListener } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  error: string;
  dragAreaClass: string;
  draggedFiles: any;
  ...

  saveFiles(files: FileList) {

    if (files.length > 1) this.error = "Only one file at time allow";
    else {
      this.error = "";
      console.log(files[0].size,files[0].name,files[0].type);
      this.draggedFiles = files;
      console.log(files);
    }
  }
}

app.component.html

<div draggable="true" ngClass="{{dragAreaClass}}">
    <div class="row">
        <div class="col-md-12 text-center">
            Drag files here
            <a href="javascript:void(0)" (click)="file.click()">
                or click to open
            </a>
            <input type="file"
                   #file
                   [multiple]="false"
                   (change)="onFileChange($event)"
                   style="display:none" />
        <div class="dragged-files-wrapper" *ngIf="draggedFiles">
          <div class="file" *ngFor="let file of draggedFiles">
            {{file}}
          </div>
        </div>
        </div>
        </div>
    </div>
    <div class="error" *ngIf="error">
        Only one file at time allow
    </div>