Angular 如何在输入元素中插入图像数据以生成文件列表

我开发了一个图像裁剪器，它生成一个base64，然后创建一个图像文件。但我不知道如何将图像数据插入条目以生成文件列表。有人能帮我吗？

如果我知道您需要的是一个输入文件来将事件传递给image cropper

PS：事件具有文件数据

例如： HTML:

<input id="input-files" type="file" (change)="onImageFileChanged($event)" accept="image/*" />

<image-cropper *ngIf="imageChangedEvent" [imageChangedEvent]="imageChangedEvent"></image-cropper>

现在，在.imageChangedEvent

中插入您选择的图像列表

如果要将文件放回输入文件，请尝试以下操作：

const data = new ClipboardEvent('').clipboardData || new DataTransfer();
data.items.add(new File(['foo'], 'image.png'));
  // replace new File(['foo'], 'image.png') with your file
document.getElementById("input-files").files = data.files;

来源：
我已经按照你告诉我的做了，但是我需要将图像裁剪器生成的新值放到输入中。要恢复以便稍后使用NativeElement.files检索，我已经添加了您现在需要的答案。谢谢老兄，您帮了我这么多！请注意，目前这仅在Firefox和Chrome（以及Edgium）上受支持。
const data = new ClipboardEvent('').clipboardData || new DataTransfer();
data.items.add(new File(['foo'], 'image.png'));
  // replace new File(['foo'], 'image.png') with your file
document.getElementById("input-files").files = data.files;