Angular 2-模型驱动的表单，带有输入文件(文件上传）

Angular 2 - Model driven form with input file (file upload)

本文关键字：文件 输入 模型驱动 表单 Angular      更新时间：2023-12-17

我目前正在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-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服务？

谢谢！

在angular 2中上传文件，

事实上，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.

Angular回购中存在一个问题和一个悬而未决的PR：

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

从这里获取答案

相关文章：