html代码
<label class="form-control-label">Product Code</label>
<select class="form-control" (change)="selectProductCode($event.target.value)">
<option [value]="code.Item_code" *ngFor="let code of data">{{code.Item_code}}</option>
</select>
component.ts代码
*imgResponse:any=""
imgUrl: string = "";
imageToShow=[];
isImageLoading: boolean;
createImageFromBlob(image: Blob) {
let reader = new FileReader();
reader.addEventListener("load", () => {
this.imageToShow = reader.result;
}, false);
if (image) {
reader.readAsDataURL(image);
}
}
productcode=[
{
Item_code:String,
}
]
data=[{
Item_code:String
}
];
selectedProductcode=""
selectProductCode(value){
this.selectedProductcode=value;
var data={
productcode:this.selectedProductcode
}
this.dataService.fetchproductimage(data).subscribe(imageresponse => {
this.imgResponse = imageresponse
console.log("image"+this.imgResponse)
this.imgUrl=this.imgResponse;
console.log("URL"+this.imgUrl)
this.isImageLoading = true;
this.dataService.getImage(this.imgUrl).subscribe(data => {
this.createImageFromBlob(data);
this.isImageLoading = false;
}, error => {
this.isImageLoading = false;
console.log(error);
});
}, error => {
console.log(error);
});
}
ngOnInit() {
this.dataService.getproductlist().subscribe(fetch => {
this.productcode=fetch.body;
this.data=this.productcode;
});
}*
service.ts代码
import{Injectable} from '@angular/core'
import{Http,Response, RequestOptions, Headers} from '@angular/http'
import {HttpHeaders,HttpClient} from '@angular/common/http'
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map'
import 'rxjs/add/operator/toPromise';
@Injectable()
export class marketingService{
constructor (public _http:Http,public httpClient:HttpClient){
}
private url="/api/users/product";
private url1="/api/users/fetchproductimage";
private url2="/api/users/fetchAllproductdetails";
createcatalogue(model){
return this._http.post(this.url,model,{withCredentials:true}).map(res=>res.json());
}
fetchproductimage(model){
return this._http.post(this.url1,model,{withCredentials:true}).map(res=>res.json());
}
getproductlist(){
return this._http.get(this.url2,{withCredentials:true}).map(res=>res.json());
}
getImage(id: string): Observable<Blob> {
return this.httpClient.get(id, {responseType: "blob"});
}
}
这是我的代码,我正在从节点js路径获取图像 一切都很好,但是在获取图像时却显示出错误
body::{"productcode":"jd"}
path ::: [“ ./ uploads / jd0.jpg”]
我正在从nodejs获取路径,但是我们可以看到图像url在数组中,但是当我在数组中定义图像url时,表明该数组未定义。
那是我从nodejs获取路径时使用字符串的错误
image./uploads/jd0.jpg
marketing.component.ts:113 URL./uploads/jd0.jpg
marketing.component.ts:120 TypeError: req.url.toLowerCase is not a function
at HttpXsrfInterceptor.webpackJsonp.../../../common/esm5/http.js.HttpXsrfInterceptor.intercept (http.js:2480)
at HttpInterceptorHandler.webpackJsonp.../../../common/esm5/http.js.HttpInterceptorHandler.handle (http.js:1794)
at HttpInterceptingHandler.webpackJsonp.../../../common/esm5/http.js.HttpInterceptingHandler.handle (http.js:2545)
at MergeMapSubscriber.project (http.js:1464)
at MergeMapSubscriber.webpackJsonp.../../../../rxjs/_esm5/operators/mergeMap.js.MergeMapSubscriber._tryNext (mergeMap.js:128)
at MergeMapSubscriber.webpackJsonp.../../../../rxjs/_esm5/operators/mergeMap.js.MergeMapSubscriber._next (mergeMap.js:118)
at MergeMapSubscriber.webpackJsonp.../../../../rxjs/_esm5/Subscriber.js.Subscriber.next (Subscriber.js:95)
at ScalarObservable.webpackJsonp.../../../../rxjs/_esm5/observable/ScalarObservable.js.ScalarObservable._subscribe (ScalarObservable.js:51)
at ScalarObservable.webpackJsonp.../../../../rxjs/_esm5/Observable.js.Observable._trySubscribe (Observable.js:172)
at ScalarObservable.webpackJsonp.../../../../rxjs/_esm5/Observable.js.Observable.subscribe (Observable.js:160)