Question

我需要弄清楚如何使用反应形式在Angular中为编辑模式添加图像补丁。后端需要图像，所以我需要弄清楚如何打补丁。我了解到您无法在输入type =“ file”中打补丁。它不支持吗？所以我想问一下这背后的想法是什么？因为后端需要它。它带有其他输入字段，因此我需要修补图像，因为用户可能不想更改图像，但希望更改其他输入字段。请在下面查看我的代码。如您所见，我正在HTML中显示图像，而未在TS中打补丁，因为输入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);
  }

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

}

在Angular中为编辑模式处理图像

2 个答案: