2017-04-26 12 views
1

angle2と同様にオーバーフローをスタックするのが新しいです。私は現在、angle2を使ってアプリケーション内のローカルフォルダに画像をアップロードする方法を学んでいます。私はローカルフォルダに画像を保存する方法を理解できません。私はスタックのオーバーフローから多くの答えを読んだが、それらのすべて(ほとんど)angular2ではなくangular2を使用しています。 angel2とnodejsを使ってローカルフォルダに画像をアップロードして保存する方法を教えてください。私はちょうどhtmlコードを持っています。angle2を使用してローカルフォルダに画像を保存する方法

<div class="form-group"> 
<label for="single">single</label> 
<input type="file" class="form-control" name="single" 
/></div> 

私は一晩中過ごしましたが、無駄になりました。誰かが私に簡単なチュートリアルを教えてくださいちょうど角度2を使用してローカルフォルダに保存する方法を示して

+1

これをご覧ください:http://stackoverflow.com/questions/41547945/write-to-a-local-file-using-angular2-typescript-locally – DeborahK

+0

私はそれを済ませました。バックエンドにdjangoを使用する。 – maadi

答えて

0

私はあなたがアップロードするファイルを選択すると、それはすでにローカルから選択されているのでフォルダ。右? NodeJSをNodeJSサーバーに送信して保存するようにNodeJSについて言及しました。私はこれが開始する何かであなたを役に立てば幸い

updateImage(fileToUpload) { 
    const body = JSON.stringify(fileToUpload); 
    const headers = new Headers({ 'Content-Type': 'image/jpeg' }); 

    return this.http.patch(this.config.host + '/photo/', body, { headers: headers }) 
    .map((response: Response) => { 

     console.log(response.json().data); 
    }) 
    .catch((error: Response) => { 
     console.log("Error: ", error); 
     return Observable.throw(error.json()); 
    }); 
} 

import { Component, OnInit, OnDestroy, ChangeDetectorRef } from '@angular/core'; 

... 

fileToUpload: File; 

constructor(private imageService: ImageService, 
      private changeDetectorRef: ChangeDetectorRef) { } 

fileChange(input) { 
    this.readFiles(input.files); 
} 

readFile(file, reader, callback){ 
    reader.onload =() => { 
    callback(reader.result); 
    this.fileToUpload = reader.result; 
    this.onImageUpload(); 
    } 
    reader.readAsDataURL(file); 
} 

readFiles(files, index=0){ 
    let reader = new FileReader(); 
    if (index in files) { 
    this.readFile(files[index], reader, (result) => { 
     var img = document.createElement("img"); 
     img.src = result; 

     this.readFiles(files, index+1); 
    }); 
    } else { 
    this.changeDetectorRef.detectChanges(); 
    } 
} 

onImageUpload() { 
    this.imageService.updateImage(this.fileToUpload).subscribe(
    (photo: Photo) => { 
     if (photo) { ... } 
    } 
); 
} 

次にサービスで、あなたはこのような何かを(私はJPGを検討している)を実行したいです。

関連する問題