当我从nodejs获取图像路径时,错误显示图像URL未在angular 2的数组中定义

时间:2019-01-12 07:22:47

标签: angular

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)

0 个答案:

没有答案