Javascript Angular 2-带输入文件的模型驱动表单（文件上载）

我目前正在Angular 2中开发一个表单，允许用户更新他的个人资料：电子邮件和密码

user-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>

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);
            }
        });
    }
}

今天，我想通过简单地添加一个文件类型字段来允许上传照片

但是我发现关于这个问题的信息很少

我想做的唯一解决办法似乎是：

是否有更好的解决方案来实现这一点？一个更接近我的代码的解决方案，因为我想要最大程度的标准化？例如，我已经使用的$http Angular服务

---

谢谢

文件在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);
    });
  }
}

从'angular2/core'导入{Injectable}；
从'rxjs/Rx'导入{Observable}；
@可注射（）
导出类上载服务{
构造函数（）{
this.progress$=Observable.create（Observable=>{
this.progressObserver=观察者
}).share（）；
}
私有makeFileRequest（url:string，params:string[]，files:File[]）：可观察{
返回可观察的。创建（观察者=>{
让formData:formData=new formData（），
xhr:XMLHttpRequest=新的XMLHttpRequest（）；
for（设i=0；i{
if（xhr.readyState==4）{
如果（xhr.status==200）{
next（JSON.parse（xhr.response））；
observer.complete（）；
}否则{
观察者错误（xhr响应）；
}
}
};
xhr.upload.onprogress=（事件）=>{
this.progress=Math.round（event.loaded/event.total*100）；
this.progressObserver.next（this.progress）；
};
xhr.open（'POST'，url，true）；
xhr.send（formData）；
});
}
}

有关更多详细信息，请参阅此plunkr：

在角回购协议中存在与此相关的问题和未决PR：

---

答案与（每个单词都是按原样粘贴的）完全相似，为什么不把它标记为副本呢。。是的，是的，因为我认为这个问题和那个问题有些不同，所以把它贴出来作为答案。若你们认为是这样的话，为什么不把它标记为重复的呢。。或者只是在评论中添加一个答案链接。我已经告诉过你，我不认为这个问题与那个问题完全相似，所以不要将这个问题标记为重复。是的，这是我的错，我必须发布链接，而不是回答对不起。嗯，当然，还有很多评论，我用原始答案的链接更新了我的答案。从现在起，我在回答问题时会注意这一点。

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);
    });
  }
}