角度2 - 入力ファイル付きのモデル駆動型（ファイルアップロード）

Question

現在、Angular 2では、ユーザーがプロファイル（電子メールとパスワード）を更新できるフォームを開発中です。

ユーザーedit.component.html：

<form novalidate="novalidate" [ngFormModel]="form" (ngSubmit)="form.valid && onSubmit()"> 
    <fieldset> 
     <div> 
      <label for="email"> 
       Email 
      </label> 

      <input id="email" type="email" #email="ngForm" ngControl="email"/> 

      <div class="error" *ngIf="email.control.hasError('required') && email.touched"> 
       This value is required. 
      </div> 
     </div> 

     <div> 
      <label for="password"> 
       Password 
      </label> 

      <input id="password" type="password" #password="ngForm" ngControl="password"/> 

      <div class="error" *ngIf="password.control.hasError('required') && password.touched"> 
       This value is required. 
      </div> 
     </div> 
    </fieldset> 

    <button type="submit" [disabled]="!form.valid"> 
     Save 
    </button> 
</form> 

ユーザーedit.component.ts：

@Component({ 
    selector: 'user-edit', 
    templateUrl: 'app/components/user-edit/user-edit.component.html', 
}) 
export class UserEditComponent implements OnInit { 
    form: any; 

    errors = []; 

    constructor(
     private _formBuilder: FormBuilder, 
     private _router: Router, 
     private _userService: UserService 
    ) {} 

    ngOnInit() { 
     this.form = this._formBuilder.group({ 
      'email': ['', Validators.required)], 
      'password': ['', Validators.required], 
     }); 
    } 

    onSubmit() { 
     var self = this; 

     this._userService.edit(this.form.value, function (response: Response) { 
      console.log('OK'); 
     }, function (response: Response) { 
      console.log('ERROR'); 
     }); 
    } 
} 

user.service.ts：

@Injectable() 
export class UserService { 
    constructor (
     private _http: Http 
    ) {} 

    edit(user: User, cfOnNext?: Function, cfOnError?: Function): void { 
     let body = JSON.stringify(user); 
     let headers = new Headers({ 
      'Content-Type': 'application/json', 
     }); 
     let options = new RequestOptions({ 
      headers: headers, 
     }); 

     self._http.put('https://api.dom/me', body, options).subscribe(function (response) { 
      if (cfOnNext) { 
       cfOnNext(response); 
      } 
     }, function (response) { 
      if (cfOnError) { 
       cfOnError(response); 
      } 
     }); 
    } 
} 

今日私が欲しいですファイルタイプフィールドを追加するだけで写真をアップロードできます。

しかし、私はその件に関する情報がほとんど見つかりませんでした。

唯一の解決策は、私が何をしたいのか近づいているようだがここにある： https://www.thepolyglotdeveloper.com/2016/02/upload-files-to-node-js-using-angular-2/

は、これを達成するためのより良い解決策はありますか？最大限の標準化が必要なため、私のコードに近いソリューションですか？例えば、私がすでに使用している$ http Angularサービスを使用していますか？

ありがとうございます！

Answer 1

angular2のファイルのアップロード、実際には

、Httpクラスは、現時点ではそれをサポートしていません。あなたはそれを行うための基本となるXHRオブジェクトを活用する必要が

：https://plnkr.co/edit/ozZqbxIorjQW15BrDFrg?p=info：

import {Injectable} from 'angular2/core'; 
import {Observable} from 'rxjs/Rx'; 

@Injectable() 
export class UploadService { 
    constructor() { 
    this.progress$ = Observable.create(observer => { 
     this.progressObserver = observer 
    }).share(); 
    } 

    private makeFileRequest (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], files[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); 
    }); 
    } 
} 

は、より多くの詳細については、このplunkrを参照してください。

角度のレポでこれに関する問題と保留中のPRがあります：

• https://github.com/angular/http/issues/69
• https://github.com/angular/angular/pull/7310/files

はfrom here