是什么导致这个 Angular 文件上传器在浏览文件时失败？

Question

我正在使用 Angular 14 开发一个包含表单的应用程序。该表格有一个文件上传器.

在form.component.ts我有：

import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { FormService } from '../services/form.service';

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css'],
})
export class FormComponent {
  @ViewChild('fileDropRef', { static: false })
  public fileDropEl!: ElementRef;
  public files: any[] = [];

  public form: FormGroup = new FormGroup({
    first_name: new FormControl('', Validators.required),
    last_name: new FormControl('', Validators.required),
    email: new FormControl('', [Validators.required, Validators.email]),
  });

  constructor(private formService: FormService) {}

  ngOnInit(): void {}

  // File uploader Begin
  public onFileDropped($event: any) {
    this.prepareFilesList($event);
  }

  public fileBrowseHandler(files: any) {
    this.prepareFilesList(files);
  }

  public deleteFile(index: number) {
    if (this.files[index].progress < 100) {
      console.log('Upload in progress.');
      return;
    }
    this.files.splice(index, 1);
  }

  public uploadFilesSimulator(index: number) {
    setTimeout(() => {
      if (index === this.files.length) {
        return;
      } else {
        const progressInterval = setInterval(() => {
          if (this.files[index].progress === 100) {
            clearInterval(progressInterval);
            this.uploadFilesSimulator(index + 1);
          } else {
            this.files[index].progress += 5;
          }
        }, 200);
      }
    }, 1000);
  }

  public prepareFilesList(files: Array<any>) {
    for (const item of files) {
      item.progress = 0;
      this.files.push(item);
    }
    this.fileDropEl.nativeElement.value = '';
    this.uploadFilesSimulator(0);
  }

  public formatBytes(bytes: number, decimals: number = 2) {
    if (bytes === 0) {
      return '0 Bytes';
    }
    const k = 1024;
    const dm = decimals <= 0 ? 0 : decimals;
    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
  }
  // File uploader End

  public sendFormData() {
    this.formService
      .sendFormData(this.formService.value)
      .subscribe((response) => {});
  }
}

在模板中，文件上传器如下所示：

<div class="file-uploader-container">
  <div class="file-uploader" appDnd (fileDropped)="onFileDropped($event)">
    <input type="file" #fileDropRef id="fileDropRef" multiple />
    <div class="center">
      <h3 class="upload">Drop your file to upload</h3>
      <h3 class="upload text-center">or</h3>
      <label class="btn-label" for="fileDropRef">Browse for file</label>
    </div>
  </div>

  <div class="files-list">
    <div class="single-file" *ngFor="let file of files; let i = index">
      <img
        src="../../assets/images/dnd/ic-file.svg"
        alt=""
        class="file-icon"
      />
      <div class="info">
        <p class="name">{{ file?.name }}</p>
        <p class="size">{{ formatBytes(file?.size) }}</p>
        <app-progress [progress]="file?.progress"></app-progress>
      </div>
      <img
        src="../../assets/images/dnd/ic-delete-file.svg"
        class="delete"
        width="20px"
        alt="file"
        (click)="deleteFile(i)"
      />
    </div>
  </div>
</div>

有一个 StackblitzHERE.

问题

虽然文件上传器在用户将文件拖到它上面时按预期工作，显示上传进度， 它浏览时失败对于文件。

问题

1. 我做错了什么？
2. 我该如何解决这个问题？

Answer 1

您还需要在文件选择中触发 filedroped：

   <input #inputType type="file" #fileDropRef id="fileDropRef" multiple (change)="onFileChange($event)"/>

onFileChange(event: any) {
    const files = event.target.files;
    this.onFileDropped(files);
  }