Question

我正在尝试使表单组向图像注册。这是我的fileuploader模板：

<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
      });
    };
  }

我的formbuilder是这样的：

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

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

SingupComponent.html：10错误DOMException：无法在'HTMLInputElement'上设置'value'属性：此输入元素接受文件名，该文件名只能以编程方式设置为空字符串。

Answer 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中具有其他格式。我希望我很清楚-.-

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

1 个答案: