2016-07-04 7 views
1

私はサービスイメージの挿入(春データ)

addImage (url: string, params: string[], files: File[]): Observable { 
       return Observable.create(observer => { 
        let formData: FormData = new FormData(), 
         xhr: XMLHttpRequest = new XMLHttpRequest(); 

        for (let i = 0; i < files.length; i++) { 
         formData.append("uploads[]", files[i], file 

s[i].name); 
       } 

       xhr.onreadystatechange =() => { 
        if (xhr.readyState === 4) { 
         if (xhr.status === 200) { 
          observer.next(JSON.parse(xhr.response)); 
          observer.complete(); 
         } else { 
          observer.error(xhr.response); 
         } 
        } 
       }; 

       xhr.upload.onprogress = (event) => { 
        this.progress = Math.round(event.loaded/event.total * 100); 

        this.progressObserver.next(this.progress); 
       }; 

       xhr.open('POST', url, true); 
       xhr.send(formData); 
      }); 

    } 

私のクライアント側を提示することによって開始し、これは私のhtmlコード

<input type="file" (change)="uploadImage($event)"/> 

Iであります私のコンポーネント

uploadImage(event) { 
     var files = event.srcElement.files; 
     console.log(files); 
     this._serviceSection.addImage('http://localhost:8080/template/img', [], files).subscribe(() => { 
      console.log('sent'); 
     }); 
    } 

から、私のサービス側でこのメソッドを呼び出す

あなたのprogressObserverではないと思われ、これはファイル名だけを表示するのは初めての試みを私のコントローラ

@RequestMapping(value = "/img", method = RequestMethod.POST) 
    public void getFileContents(@RequestParam MultipartFile file) { 
     System.out.println("++++++++++++++++++++++++++++++++++++++++ " +file.getOriginalFilename()); 
    } 

からの方法ですが、私は

enter image description here

答えて

1

このエラーが出ますセット。この理由は、あなたが関連する観測可能なものを購読していないことが原因です。 observablesが怠惰であることを忘れないでください。また、あなたがそれらに登録していなければ、初期化コールバックは呼び出されません。エラーを持っていることから防ぐため

、それがnullだかいないかどうかをチェックできます。

xhr.upload.onprogress = (event) => { 
    if (this.progressObserver) { 
    this.progress = Math.round(event.loaded/event.total * 100); 

    this.progressObserver.next(this.progress); 
    } 
}; 

をそうでない場合、あなたはRC2から、Angular2は、HTTPメソッドのパラメータとしてFormDataオブジェクトを受け入れることに気づくことができます...

+0

FormDataを本体としてアップロードして使用しているときに、Httpサービスメソッドを使用してonprogressコールバックを取得するにはどうすればよいですか? – AndroidLover