Question

html

<img [src]="imageUrl"  style="width:250px;height:200px">
<input  id="imageNameId" type="file"  #Image accept="image/*"  formControlName="imageName" (change)="handleFileInput($event.target.files)"/>

add-component.ts

handleFileInput(file: FileList) {
this.imageName = file.item(0);
var reader = new FileReader();
reader.onload = (event:any) => {
  this.imageUrl = event.target.result;
}
reader.readAsDataURL(this.imageName);
}

handleFileInput将图像转换为base64，如何将值发送到addImage（）：handleFileInput中的void？

addImage(): void {

let image = automapper.map(
  'ImageFormModel',
  'ImageForCreation',
  this.imageForm.value);
this.tourService.addImage(image)
  .subscribe(
    () => {
      this.router.navigateByUrl('/image');
    })
 }

Answer 1

如果两种方法都在同一文件中：

如果addImage() {...}在同一文件中，则可以使用handleFileInput在this.addImage()内部简单地调用它。在addImage方法内部，由于addImage方法与handleFileInput在同一文件中，因此它也可以访问this.imageUrl

如果两种方法都在不同的文件中：

如果addImage() {...}不在同一文件中，则可以简单地将addImage()方法设置为参数化方法。在handleFileInput中调用它是因为它将成为不同文件（可能是服务）的一部分（在本示例中，我们将其称为ImageService），您必须首先注入该服务作为您正在使用的组件中的依赖项。

constructor(..., private imageService: ImageService, ...) {}

然后您可以使用this.imageService.addImage(this.imageUrl)来调用它。

在addImage方法内部，由于addImage方法现在将通过参数接受Image Base 64 URL，因此它将获得图像URL。

更新1：

在GitHub repo that you shared中，这两个方法似乎在同一文件中。因此，就像我在上面的答案中所说的那样，您应该可以使用this.imageUrl来获取URL。只需在您的addImage方法中使用它，而不要使用this.imageForm.value：

addImage(): void {
  let image = automapper.map(
    'ImageFormModel',
    'ImageForCreation',
    this.imageUrl);
  this.tourService.addImage(image)
    .subscribe(
      () => {
        this.router.navigateByUrl('/image');
      })
}

Answer 2

最后成功了 html

<div class="form-group">
<label class="col-md-2 control-label" for="imageNameId">Image Name</label>
<div class="col-md-8">
<img [src]="imageUrl"  style="width:250px;height:200px">
<input  id="imageNameId" type="file"  #Image accept="image/*"     formControlName="imageName" (change)="handleFileInput($event.target.files)"/>
<textarea id="base64textarea" placeholder="Base64 will appear here" cols="50" rows="15" formControlName="imageNameURL">{{imageUrl}}</textarea>
</div>
</div>

image-add.component.ts

addImage(): void {

let image = automapper.map(
  'ImageFormModel',
  'ImageForCreation',
  this.imageForm.value);
  image.imageName = (<HTMLInputElement>document.getElementById("base64textarea")).value;  
this.tourService.addImage(image)
  .subscribe(
    () => {
      this.router.navigateByUrl('/image');
    })

    console.log(image)
 }

如何将base64值发送到API？

2 个答案:

更新1：