Ionic 4：尝试上传自拍图像时，错误：未捕获（承诺）：TypeError：无法读取未定义的属性“订阅”

Question

i am using ionic version 4. Trying to take picture from phone camera and upload. Last 2 days i am trying to solve this. Thanks in advance.

const options: CameraOptions = {
  quality: 50,
  sourceType: sourceType,
  destinationType: this.camera.DestinationType.DATA_URL,
  encodingType: this.camera.EncodingType.JPEG,
  mediaType: this.camera.MediaType.PICTURE,
  cameraDirection: this.camera.Direction.FRONT,
  allowEdit: true,
  targetHeight: 300,
  targetWidth: 300,
}

   this.camera.getPicture(options).then((imageData) => {
  this.imageData = imageData;
  this.service.postFile(url, this.imageData).subscribe(res => {
    if (res.status == 200) {
      this.toastr.presentToast('image done')
    }
  }, error => {
    this.toastr.presentToast('image failure')
  });

}


postFile(url, file: any): any {
const reader = new FileReader();
reader.onload = () => {
  const formData = new FormData();
  const imgBlob = new Blob([reader.result], {
    type: file.type
  });
  formData.append('file', imgBlob, file.name);
  reader.readAsArrayBuffer(file);

  return this.http.post(environment.domain + url, formData).pipe(map(res => res),
    catchError((err) => throwError(err))
  );
}

}

I m getting error:

Answer 1

You are getting that error because you are calling a void method but you are expecting that it will return an observable.

I suggest you create method to make the reader an observable and use flatmap on your postFile so that you will call the http method once it's done with reader observable. So you will be using the postFile method and it will return an observable now.

I created a similar method just to show you the logic on how to do it properly. Please change it as per your needs.

readFile(url, file: any) {
    const res = new Subject<Blob>();
    const reader = new FileReader();
    reader.onload = () => {
        const imgBlob = new Blob([reader.result], {
          type: file.type
        });
        res.next(imgBlob);
        res.complete();
        reader.readAsArrayBuffer(file);
      }
    return res.asObservable();
}

postFile(url, file: any) {
    return this.readFiles(url, file).pipe(
        flatMap((imgBlob: Blob) => {
            const formData = new FormData();
            formData.append('file', imgBlob, file.name);
            return this.http.post(environment.domain + url, formData).pipe(map(res => res),
                catchError((err) => throwError(err))
            );
        })
    )
}