时间戳

首页 > 解决方案 > 由于“无法在 'HTMLInputElement' 上设置 'value' 属性”，我无法将文件值放入我的 formBuilder

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

问题描述

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

<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 错误 DOMException：无法在“HTMLInputElement”上设置“值”属性：此输入元素接受文件名，该文件名只能以编程方式设置为空字符串。

标签： angular

解决方案

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

C:\\some_directory\\file.png

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

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

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

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

推荐阅读