由于“无法在 'HTMLInputElement' 上设置 'value' 属性”，我无法将文件值放入我的 formBuilder答案

【问题标题】：I can not put file value in my formBuilder because of "Failed to set the 'value' property on 'HTMLInputElement'"由于“无法在 'HTMLInputElement' 上设置 'value' 属性”，我无法将文件值放入我的 formBuilder
【发布时间】：2019-05-31 21:56:22
【问题描述】：

我正在尝试使表单组注册图像。这是我的文件上传模板：

<label for="file-loader" class="float-right">
  <img src="assets/images/robot-02-icon.png" alt="robot" *ngIf="!imgURL">
  <img [src]="imgURL" height="200" *ngIf="imgURL">
</label>
<input type="file" formControlName="photo_id" id="file-loader" (change)="readURL($event)">

这是我的 readURL 函数（）：

  readURL(event) {
    if (event.target.files.length === 0) {
      return;
    }
    const reader = new FileReader();
    this.imagePath = event.target.files;
    this.registerForm.patchValue({
      photo_id: event.target.files[0]
    });
    reader.readAsDataURL(event.target.files[0]);
    reader.onload = ( ) => {
      this.imgURL = reader.result;
      console.log(this.imgURL = reader.result);
      this.registerForm.patchValue({
        photo_id: reader.result
      });
    };
  }

我的表单生成器是这样的：

this.registerForm = this.formBuilder.group({
  name: ['', Validators.required],
  email: ['', [Validators.required, Validators.email]],
  password: ['', Validators.required],
  photo_id: [''],
});

当我尝试提交表单时，我在控制台中收到此消息：

SingupComponent.html:10 ERROR DOMException: 未能在“HTMLInputElement”上设置“value”属性：此输入元素接受文件名，该文件名只能以编程方式设置为空字符串。

【问题讨论】：

标签： angular

【解决方案1】：

好吧，在我看来，您的输入文件中不应该有 formControlName。出现错误是因为当您阅读所选文件时，您会在 FormControl 中获得如下数据：

C:\\some_directory\\file.png

当FileReader结束进程时，结果如下：

data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCADIAMgDASIAAhEBAxEB/8QAHQAAAAcBAQEAAAA...

然后您尝试将数据放入FormControl 再次执行patchValue 并因此引发错误，因为您正在修补与输入文件接口不兼容的数据。我建议你从输入文件中删除formControlName，一切都应该与(change)一起工作。

另一方面，您是多余的，因为您正在捕获在两侧选择的文件，在本例中为 FormControl 和 (change)，最后您正在转换数据并在 FormControl 中覆盖它其他格式。我希望我很清楚-.-

【讨论】：