Когда я пытался загрузить изображение с помощью 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
[email protected] C:\xampp\htdocs\imageUpload
+-- @angular-devkit/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @types/[email protected]
+-- @types/[email protected]
+-- @types/[email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
`-- [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
$ 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: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
added 8 packages and updated 1 package in 310.507s
Задача ещё не решена.
Других решений пока нет …