角4.ファイルアップロード

Question

私は角度4を使用していますが、私はこのコードを持っています。

uploadPhoto(file: File):Promise<any> { 
    var formData = new FormData(); 
    formData.append('req', file); 
    return this.http.post(`${this.urlApi}/uploadphoto`, formData, { 
    withCredentials: false, 
    body: formData, 
    }) 
    .toPromise() 
    .catch(this.handleError); } 

次に、Java Springで自分のプログラムをデバッグします。私は、デバッグパネルでは "req"というパラメータしか持っていませんが、マルチパートファイルはありません。私はヘッダを "multipart/form-data"と "undefined"に設定します。私は「formData.append設定（ 『REQ』を、ファイル[0]）; はまた、私はこのコードを使用：コンテンツタイプ：

uploadPhoto2(file:File){ 
    var formData = new FormData(); 
    formData.append('file', file); 
    var request = new XMLHttpRequest(); 
    request.open('POST', `${this.urlApi}/uploadphoto`); 
    request.send(formData); 
} 

私は同じ結果を持って、私は見クロムのコンソールでマルチパートを。 /フォームデータ;境界= ---- WebKitFormBoundarycE8MNSpWUCwCDLLB

私はポストマン（クロームexstension）私はsuccesfullの結果を持っているからデータを送信

Debug in Java Debug in chrome

Answer 1

このコードは、私にとって非常にうまく機能している

：

。

HTMLのCODE：（これはイメージです）

<div class="form-group"> 
<label for="usr">Upload your new photo(Optional):</label> <input type="file" accept=".jpg,.png,.jpeg" (change)="attachFile($event)"> 
<br> 
<img src="{{imageSrc}} | defaultPipe " height="250" weight="250" alt="Image preview..." /> 
</div> 

アンギュラCODE：

attachFile(event) : void { 
    var reader = new FileReader(); 
    let _self = this; 

    reader.onload = function(e) { 
     _self.imageSrc = reader.result; 
     console.log(_self.imageSrc); 
    }; 
    reader.readAsDataURL(event.target.files[0]); 
    } 

注：この方法であなたはのローカル変数関数内でそれを使用するには、この演算子を定義する必要があります。 imageSrcには、fileのbase64バイト配列があります。