Угловая 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 service, который я уже использую?

Спасибо!

Answer 1

Загрузка файла в angular2,

В самом деле, Http класс не поддерживает, что на данный момент.

Вы должны использовать базовый объект XHR, чтобы сделать это:

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 для более подробной информации: https://plnkr.co/edit/ozZqbxIorjQW15BrDFrg?p=info.

Существует вопрос и ожидающий PR относительно этого в угловом репо:

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

принял ответ from here