Angular 文件上传后显示 REST 响应

Question

我有一个 angular 应用程序，我想上传一个文件并根据上传的文件显示一个字符串。我对 Rest API 进行了 post 调用，此 API returns 响应，我想显示此响应的内容。但是出了点问题，因为我可以 console.log 响应的内容，但我无法正常 显示它 （即作为标签或类似内容）。
谁能告诉我该怎么做？

这里是component.html

<div>
    <label class="image-upload-container btn btn-bwm">
        <span>Select Image</span>
        <input #imageInput type="file" accept="image/*" (change)="processFile(imageInput)">
    </label>

    <!--IT DOES NOT WORK  Displays [object Object] -->
    <input type=text name="prediction" [(ngModel)]="prediction" />

    <!--IT DOES NOT WORK  Displays [object Object] -->
    {{prediction}}
</div>

这里是component.ts

import { Component, OnInit } from '@angular/core';
import { ImageService } from '../../services/image.service';

class ImageSnippet {
  constructor(public src: string, public file: File) { }
}

@Component({
  selector: 'app-image',
  templateUrl: './image.component.html',
  styleUrls: ['./image.component.css']
})
export class ImageComponent implements OnInit {

  constructor(private imageService: ImageService) { }
  prediction!: String;
  ngOnInit(): void {
  }
  processFile(imageInput: any) {
    const file: File = imageInput.files[0];
    const reader = new FileReader();

    reader.addEventListener('load', (event: any) => {

      let selectedFile = new ImageSnippet(event.target.result, file);
      this.imageService.uploadImage(selectedFile.file).subscribe(
        (response) => {
          
          this.prediction = response.toString();// IT DOES NOT WORK  Displays [object Object] 
          // console.log() WORKS: it logs something like this: {prediction: "jeges, tensor([0.0530, 0.0999, 0.8471])"}
//which is the exact string that I want to display
          console.log(response)
        }        
    });
    reader.readAsDataURL(file);
  }
}

这里是service.ts

...
uploadImage(imageFile: File): Observable<Response> {
    const formData = new FormData();
    formData.append('imageFile', imageFile);
    return this.http_client.post<Response>(this.url, formData);
  }
...

这里是 API:

@app.route('/api/image-upload', methods=['POST'])
def call_predict():
    imageFile = request.files['imageFile']
    prediction = makePrediction(imageFile)
    resp = make_response({"prediction": prediction}, 200)
    resp.headers['Access-Control-Allow-Origin'] = '*'
    return resp

Answer 1

您的 response 上有一个 toString() 调用，导致显示 string。因此，让我们首先修复您的文件处理函数：

因此，首先像这样修复您的服务请求处理程序

this.imageService.uploadImage(selectedFile.file).subscribe(
  (response) => {
    this.prediction = response;
  }        
});

因此此更改会导致您的 HTML 出现问题，因此我们需要对其进行调整，因为 this.prediction 不是 string

<div>
    <label class="image-upload-container btn btn-bwm">
        <span>Select Image</span>
        <input #imageInput type="file" accept="image/*" (change)="processFile(imageInput)">
    </label>

    <!-- here we'll bind according to the structure you gave in your code -->
    <input type=text name="prediction" [(ngModel)]="prediction.prediction"/>

    <!-- Since we have an object we cant just dump it here, so lets use a json pipe -->
    {{prediction | json}}
</div>

最后，您 class 中的成员 prediction 必须键入 Response

prediction!: Response;

所以我认为这应该可行，试试吧...

Angular 文件上传后显示 REST 响应

Angular displaying REST Response after file upload

angular

typescript

response

console.log