上传功能:我想绑定文件/图片,怎么可能?

时间:2017-07-04 07:50:36

标签: angular

上传功能:我想绑定文件/图片,怎么可能? 我不知道如何在参数

中传递表单数据
  upload() {
    let inputEl: HTMLInputElement = this.inputEl.nativeElement;
    let fileCount: number = inputEl.files.length;
    let formData = new FormData();
    console.log(formData)
    if (fileCount > 0) { // a file was selected
        for (let i = 0; i < fileCount; i++) {
            formData.append('file[]', inputEl.files.item(i));
        }
        this.http
            .post(this.uploadUrl, formData)
             .subscribe(
            data => {
                alert ('Update successful');
            },
            error => {
                alert  ('Not updated');
                this.loading = false;
            });
    }

HTML组件:

<form>
 <div>
      <input type="file" [multiple]="multiple" #fileInput>
      <button type="button" (click)="upload()">Upload</button>
 </div>
</form>

1 个答案:

答案 0 :(得分:0)

 <input type="file" (change)="fileChange($event)" placeholder="Upload 
 file" accept=".pdf,.doc,.docx">

fileChange(event) {
    let fileList: FileList = event.target.files;
    if(fileList.length > 0) {
    let file: File = fileList[0];
    let formData:FormData = new FormData();
    formData.append('uploadFile', file, file.name);
    let headers = new Headers();
    /** No need to include Content-Type in Angular 4 */
    headers.append('Content-Type', 'multipart/form-data');
    headers.append('Accept', 'application/json');
    let options = new RequestOptions({ headers: headers });
    this.http.post(`${this.apiEndPoint}`, formData, options)
        .map(res => res.json())
        .catch(error => Observable.throw(error))
        .subscribe(
            data => console.log('success'),
            error => console.log(error)
        )
}

}