在角度模式下处理编辑模式的图像

Question

我需要弄清楚如何使用反应式表单在 Angular 中为编辑模式修补图像。后端需要映像，所以我需要弄清楚如何修补它。 我读到你不能在输入类型="文件"中修补。它不支持它？那么请问这背后的想法是什么？因为它是后端需要的。它带有其他输入字段，因此我需要修补图像，因为用户可能不想更改图像，而是更改其他输入字段。请参阅下面的代码。如您所见，我在 HTML 中显示图像，我没有在 TS 中修补它，因为输入类型="文件"似乎可以读取它。谢谢。

.HTML

<label class="col-sm-4 col-form-label">Featured Image</label>
<img class="mb-2" [src]="getUrl(tour.images[0].image)" height="200px" width="350px">
<input type="file" (change)="onSelectFeaturedImage($event)" class="form-control"
formControlName="featured_image">
<label class="col-sm-4 col-form-label">Travel Dates</label>
<div class="col-sm-4">From
<input type="date" class="form-control" formControlName="travel_date_from">

TS

patchValues() {
this.tourForm.patchValue({
travel_date_from: this.tour.date_from
});
this.setAsTouched(this.tourForm);
}

Answer 1

使[src]绑定图像输入的值。

//featured_image.value
[src]="//value for image url"

Answer 2

在 jquery 和纯 Javascript 中尝试以下解决方案 您只需要检索您上传的图像的字节数组及其扩展名 然后只需为您的图像控件提供生成的 SRC 我希望它有所帮助

var PhotoArr = [];  // array of bytes from the server
var PhotoExt = "jpg";//example
if (PhotoArr) {
var byteArray = new Uint8Array(oldResume.PhotoArr);
var blob = new Blob([byteArray], { type: 'application/' + PhotoExt });
var image = $('.mb-2');
var urlCreator = window.URL || window.webkitURL;
var imageUrl = urlCreator.createObjectURL(blob);
image.attr('src', imageUrl);
}