Question

我有一个ngform，其中包含一个用于上传文件的单独组件。当我尝试在此组件中输入文件时，浏览器将引发以下错误：

我不知道这可能来自哪里，这是我的父母html：

<form
  novalidate
  #logosForm="ngForm"
  (ngSubmit)="brandingService.setLogos(logosForm.value)">
    <div class="columns">
      <div class="column">
        <app-file-upload
          title="Logo principal"
          name="logo"
          label="Logo.png">
        </app-file-upload>
      </div>
    </div>

这是我的孩子嵌套的html（应用文件上传）：

 <div class="upload">
  <span class="upload__label" [translate]="title"></span>
  <div class="file is-fullwidth">
    <label class="file-label">
      <input
      class="file-input"
      type="file"
      accept=".png, .jpg, .ico"
      [name]="name"
      (change)='handleFileInput($event)'
      [(ngModel)]="file">
      <span class="file-cta">
        <span class="file-icon">
          <i class="fas fa-upload"></i>
        </span>
      </span>
      <span class="file-name">
        {{label}}
      </span>
    </label>
  </div>
  <figure *ngIf="file" class="image previsualisation" [ngClass]="{'is-128x128': name == 'logo', 'is-48x48': name == 'favicon'}">
      <img [src]="file">
  </figure>
</div>

这是孩子的ts：

  export class FileUploadComponent {
  file: string | ArrayBuffer;
  @Input()
  title: string;
  @Input()
  name: string;
  @Input()
  label: string;

  constructor() { }

  handleFileInput(event: Event): void {
    const userFile: File = (<HTMLInputElement> event.target).files[0];
    if (userFile) {
      this.label = userFile.name;
      const reader: FileReader = new FileReader();
      reader.onload = ((e: Event): void => {
        const filereader: FileReader = <FileReader> e.target;
        this.file = filereader.result;
      });
      reader.readAsDataURL((<HTMLInputElement> event.target).files[0]);
    }
  }
}

据我所知，该错误可能是由于我尝试绑定到文件对象（或字符串| ArrayBuffer）而导致的，因此我尝试更改该对象的值，因此禁止这样做。我看不到如何才能不同地使用ngModel来使子组件输出用户上传的文件。如果您有想法，请帮助我，谢谢！

Answer 1

虽然我没有立即在您的代码中看到错误，但是将文件输入字段与NgModel结合使用时会显示一些非常奇怪的行为。

Ben Nadel最近写了一篇文章，内容涉及如何使用ControlValueAccessor正确访问文件输入值属性，也许您可以adopt his method instead。

Answer 2

我建议您点击此链接。通过避免重复文件（最大大小），使用这种方式上传文件。

/* Add application styles & imports to this file! */
@import url('https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css')

<div>
	<label class="btn btn-primary">
    Upload Documents <input type="file" #fileUpload (change)="fileChangeEvent($event)" onclick="this.value=null" multiple hidden style="display:none;">
  </label>
</div>
<ul>
  <li *ngFor="let fileName of selectedFileNames">{{fileName}} <button (click)="removeFile (fileName)" style="cursor: pointer;"><i class="fa fa-times"></i></button>
  </li>
</ul>

//打字稿代码：有关Typescript代码，请参见

Working Demo

嵌套组件中带有ng-model的文件输入会引发InvalidStateError

2 个答案: