typescript 如何在Angular Reactive Form中使用PatchValue将Base64String从File Upload传递到FormGroup中的image属性

iqxoj9l9 于 2023-04-13 发布在 TypeScript

关注(0)|答案(1)|浏览(123)

我正在尝试将上传的图像转换为base64字符串并发送到API。我使用的是React式表单。问题是，当将base64字符串结果修补到FormGroup图像属性时，我一直出错。下面是代码：

onFileChange(event) {
      let reader = new FileReader();
     
      if(event.target.files && event.target.files.length) {
        const [file] = event.target.files;
        reader.readAsDataURL(file);
      
        reader.onload = () => {
          this.formGroup.patchValue({
            file: reader.result as string
          });
        };
      }
    }

我一直试图将值修补到表单组，这个错误：
错误DOMException：试图使用不可用或不再可用的对象

typescript

来源：https://stackoverflow.com/questions/75977725/how-to-pass-base64string-from-file-upload-to-image-property-in-formgroup-using-p

1条答案

按热度按时间

7rtdyuoh1#

将onload方法设置为async并删除'as string'：

reader.onload = async () => {
   this.formGroup.patchValue({
      file: reader.result
   });
};

如果由于某种原因失败了，在使用它之前将reader.result值分配给一个var：

let imgFile = reader.result; 
reader.onload = async () => {
   this.formGroup.patchValue({
      file: imgFile 
   });
}

另外，请确保在修补值后执行this.formGroup.updateValueAndValidity()。

赞(0）回复(0）举报 2023-04-13

我来回答

typescript 如何在Angular Reactive Form中使用PatchValue将Base64String从File Upload传递到FormGroup中的image属性

1条答案

相关问题

热门标签

最新问答