在 Angular 中处理编辑模式的图像答案

【问题标题】：Handling Image For Edit Mode in Angular在 Angular 中处理编辑模式的图像
【发布时间】：2019-02-27 22:20:38
【问题描述】：

我需要弄清楚如何使用响应式表单在 Angular 中为编辑模式修补图像。后端需要图像，所以我需要弄清楚如何修补它。我读到您无法在输入类型 =“文件”中进行修补。它不支持吗？所以我想问一下这背后的想法是什么？因为它是后端需要的。它带有其他输入字段，因此我需要修补图像，因为用户可能不想更改图像而是其他输入字段。请在下面查看我的代码。正如您所看到的，我在 HTML 中显示图像并且我没有在 TS 中修补它，因为 input type="file" 似乎可以读取它。谢谢。

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

【问题讨论】：

请澄清您的问题，这令人困惑。
@FussinHussin。对不起，请通读。这是我得到的最好的解释。

标签： angular angular-reactive-forms angular-forms angular4-forms

【解决方案1】：

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

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

【讨论】：

是的，不清楚您是否正在这样做。你能在 stackblitz.com 上发布一个工作示例吗？
对不起，我不能在 stackblitz 中这样做，因为图像来自后端。我的意思是你能修补输入类型=“文件”中的图像吗？由于需要图片
如果用户上传了图片，那么您可以将其存储在浏览器中，并在表单中检索它
是的，这就是我的意思。但是问题在于用户不想更改图像时。但改为更改其他输入字段。由于需要图像，我该如何实现？
将图像存储在浏览器中，当用户进入编辑模式时，将浏览器中的图像添加到表单中。或者您可以将其存储在类中的变量中，并将其插入到模板中

【解决方案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);

}

【讨论】：