“对象”类型的参数不可分配给“字符串”类型的参数 - 离子 Angular

Question

尝试使用 JSON 进行解析，但出现此错误：“对象”类型的参数不可分配给“字符串”类型的参数。

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-uploader',
  templateUrl: './uploader.page.html',
  styleUrls: ['./uploader.page.scss'],
})
export class UploaderPage implements OnInit {

  imageURL: string
  constructor(public http: HttpClient) { }

  ngOnInit() {
  }

  fileChanged(event) {
    const files = event.target.files
    const data = new FormData()
    data.append('file', files[0])
    data.append('UPLOADCARE_STORE', '1')
    data.append('UPLOADCARE_PUB_KEY', '12d3f0b0b65cb448aa6b')

    this.http.post('https://upload.uploadcare.com/base/', data).subscribe(event => {
      console.log(event)
      this.imageURL = JSON.parse(event).file
    })
  }


}

在 (event) 下的this.imageURL = JSON.parse(event).file行中，我得到了那个错误。 可能是什么原因以及如何解决它。

HTML：

<ion-header>
  <ion-toolbar>
    <ion-title>Upload Image</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <div class="camera"> </div>
  <input type="file" (change)="fileChanged($event)"/>

  <img *ngIf="imageURL" src="https://ucarecdn.com/{{ imageURL}}/"/>
</ion-content>

Answer 1

你很亲密。 看来来自 POST 请求的响应已经采用 JSON 格式。 您在这里不需要JSON.parse() 。 尝试以下

this.http.post('https://upload.uploadcare.com/base/', data).subscribe(
  event => {
    this.imageURL = event.file;
  },
  error => { // handle error }
);

在服务中发出实际的 HTTP 请求并处理订阅中的错误也是一种很好的做法。