Проблема в обработке Http Response со статусом: 200 от Angular 6

Когда я пытался загрузить изображение с помощью API, написанного на PHP, однажды после загрузки получилось в следующем каталоге получить HttpErrorResponse код с status: 200

загрузить-image.component.ts

OnSubmit(Caption,Image){
this.imageService.postFile(Caption.value,this.fileToUpload)
.subscribe(
data =>{
// this.heroes.push(hero);
console.log(data);
Caption.value = null;
Image.value = null;
this.imageUrl = "/assets/img/default-image.png";
},
err => {
this.errorMsg = <any>err;
console.log(err);
}
);
}

Загрузка-image.service

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpResponse } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { catchError, map, tap } from 'rxjs/operators';
...

postFile(caption: string, fileToUpload: File): Observable<any> {
const endpoint = 'http://localhost/angular6/fileUpload.php';
const formData: FormData = new FormData();
formData.append('selectFile', fileToUpload, fileToUpload.name);
formData.append('ImageCaption', caption);
return this.http
.post<any>(endpoint, formData)
.pipe(tap(
res=>{
console.log('server data '+res)
},
catchError( this._errorHandler)
// err=> console.log(err)
))
}

private _errorHandler(error: Response) {
console.error('Error Occured: ' + error);
return Observable.throw(error || 'Some Error on Server Occured');

}

Но изображение было успешно загружено. Но даже после завершения загрузки я получаю сообщение об ошибке HTTP

Рассматривая вышеупомянутые два кода, объединяя журналы, созданные после отправки, выглядит следующим образом:

catchError(this._errorHandler) то есть, перехватывая ошибку от
консоль печатает вот так ниже

TypeError: source.lift is not a function
at TapSubscriber.catchErrorOperatorFunction [as _tapError] (catchError.js:8)
at TapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/tap.js.TapSubscriber._error (tap.js:55)
at TapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
at FilterSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
at FilterSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/OuterSubscriber.js.OuterSubscriber.notifyError (OuterSubscriber.js:13)
at InnerSubscriber.push../node_modules/rxjs/_esm5/internal/InnerSubscriber.js.InnerSubscriber._error (InnerSubscriber.js:18)
at InnerSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)

err => console.log(err) Результаты в HttpErrorResponse

upload-image.component.ts:42
HttpErrorResponse {headers: HttpHeaders, status: 200, statusText: "OK", url: "http://localhost/angular6/fileUpload.php", ok: false, …}
error:
error: SyntaxError: Unexpected token h in JSON at position 0 at JSON.parse (<anonymous>) at XMLHttpRequest.onLoad (http://localhost:4200/vendor.js:7454:51) at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (http://localhost:4200/polyfills.js:2743:31) at Object.onInvokeTask (http://localhost:4200/vendor.js:36912:33) at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (http://localhost:4200/polyfills.js:2742:36) at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (http://localhost:4200/polyfills.js:2510:47) at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (http://localhost:4200/polyfills.js:2818:34) at invokeTask (http://localhost:4200/polyfills.js:3862:14) at XMLHttpRequest.globalZoneAwareCallback (http://localhost:4200/polyfills.js:3888:17)
message: "Unexpected token h in JSON at position 0"stack: "SyntaxError: Unexpected token h in JSON at position 0↵    at JSON.parse (<anonymous>)↵    at XMLHttpRequest.onLoad (http://localhost:4200/vendor.js:7454:51)↵    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (http://localhost:4200/polyfills.js:2743:31)↵    at Object.onInvokeTask (http://localhost:4200/vendor.js:36912:33)↵    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (http://localhost:4200/polyfills.js:2742:36)↵    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (http://localhost:4200/polyfills.js:2510:47)↵    at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (http://localhost:4200/polyfills.js:2818:34)↵    at invokeTask (http://localhost:4200/polyfills.js:3862:14)↵    at XMLHttpRequest.globalZoneAwareCallback (http://localhost:4200/polyfills.js:3888:17)"__proto__: Error
constructor: ƒ SyntaxError()
message: ""name: "SyntaxError"toString: ƒ toString()
__proto__: Object
text: "http://localhost/angular4/uploads/153744221629Koala.jpg"__proto__: Object
headers: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ}
message: "Http failure during parsing for http://localhost/angular4/fileUpload.php"name: "HttpErrorResponse"ok: false
status: 200
statusText: "OK"url: "http://localhost/angular4/fileUpload.php"__proto__: HttpResponseBase

Как я должен кодировать, чтобы обработать и получить успешное сообщение Http Response с именем изображения, которое было успешно загружено?

Отредактировано:

$ npm list --depth=0
image-upload@0.0.0 C:\xampp\htdocs\imageUpload
+-- @angular-devkit/build-angular@0.8.3
+-- @angular/animations@6.1.8
+-- @angular/cli@6.2.3
+-- @angular/common@6.1.8
+-- @angular/compiler@6.1.8
+-- @angular/compiler-cli@6.1.8
+-- @angular/core@6.1.8
+-- @angular/forms@6.1.8
+-- @angular/http@6.1.8
+-- @angular/language-service@6.1.8
+-- @angular/platform-browser@6.1.8
+-- @angular/platform-browser-dynamic@6.1.8
+-- @angular/router@6.1.8
+-- @types/jasmine@2.8.8
+-- @types/jasminewd2@2.0.3
+-- @types/node@8.9.5
+-- codelyzer@4.3.0
+-- core-js@2.5.7
+-- jasmine-core@2.99.1
+-- jasmine-spec-reporter@4.2.1
+-- karma@3.0.0
+-- karma-chrome-launcher@2.2.0
+-- karma-coverage-istanbul-reporter@2.0.4
+-- karma-jasmine@1.1.2
+-- karma-jasmine-html-reporter@0.2.2
+-- materialize-css@1.0.0-rc.2
+-- protractor@5.4.1
+-- rxjs@6.2.2
+-- ts-node@7.0.1
+-- tslint@5.11.0
+-- typescript@2.9.2
`-- zone.js@0.8.26

npm ERR! missing: mkdirp@0.5.1, required by node-pre-gyp@0.10.0
npm ERR! missing: minimist@0.0.8, required by mkdirp@0.5.1
npm ERR! missing: minimatch@3.0.4, required by ignore-walk@3.0.1
npm ERR! missing: brace-expansion@1.1.11, required by minimatch@3.0.4
npm ERR! missing: balanced-match@1.0.0, required by brace-expansion@1.1.11
npm ERR! missing: concat-map@0.0.1, required by brace-expansion@1.1.11
npm ERR! missing: console-control-strings@1.1.0, required by npmlog@4.1.2
npm ERR! missing: inherits@2.0.3, required by readable-stream@2.3.6
npm ERR! missing: safe-buffer@5.1.1, required by readable-stream@2.3.6
npm ERR! missing: safe-buffer@5.1.1, required by string_decoder@1.1.1
npm ERR! missing: console-control-strings@1.1.0, required by gauge@2.7.4
npm ERR! missing: string-width@1.0.2, required by gauge@2.7.4
npm ERR! missing: strip-ansi@3.0.1, required by gauge@2.7.4
npm ERR! missing: code-point-at@1.1.0, required by string-width@1.0.2
npm ERR! missing: is-fullwidth-code-point@1.0.0, required by string-width@1.0.2
npm ERR! missing: strip-ansi@3.0.1, required by string-width@1.0.2
npm ERR! missing: number-is-nan@1.0.1, required by is-fullwidth-code-point@1.0.0
npm ERR! missing: ansi-regex@2.1.1, required by strip-ansi@3.0.1
npm ERR! missing: string-width@1.0.2, required by wide-align@1.1.2
npm ERR! missing: inherits@2.0.3, required by glob@7.1.2
npm ERR! missing: minimatch@3.0.4, required by glob@7.1.2
npm ERR! missing: once@1.4.0, required by glob@7.1.2
npm ERR! missing: once@1.4.0, required by inflight@1.0.6
npm ERR! missing: wrappy@1.0.2, required by inflight@1.0.6
npm ERR! missing: wrappy@1.0.2, required by once@1.4.0
npm ERR! missing: minipass@2.2.4, required by tar@4.4.1
npm ERR! missing: mkdirp@0.5.1, required by tar@4.4.1
npm ERR! missing: safe-buffer@5.1.1, required by tar@4.4.1
npm ERR! missing: yallist@3.0.2, required by tar@4.4.1
npm ERR! missing: minipass@2.2.4, required by fs-minipass@1.2.5
npm ERR! missing: safe-buffer@5.1.1, required by minipass@2.2.4
npm ERR! missing: yallist@3.0.2, required by minipass@2.2.4
npm ERR! missing: minipass@2.2.4, required by minizlib@1.1.0

$ ng update rxjs
WARNING: This command may not execute successfully. The package/collection may not support the 'targets' field within 'C:\xampp\htdocs\imageUpload\angular.json'. This can be corrected by renaming the following 'targets' fields to 'architect':
1) Line: 12; Column: 7
2) Line: 104; Column: 7
Updating package.json with dependency rxjs @ "6.3.2" (was "6.2.2")...
UPDATE package.json (1355 bytes)

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 8 packages and updated 1 package in 310.507s

0

Решение

Задача ещё не решена.

Другие решения

Других решений пока нет …

По вопросам рекламы ammmcru@yandex.ru
Adblock
detector