如何在Angular2中上傳文件

Question

我必須隨圖像一起提交表單。我試過這個代碼（有多種方式），但沒有爲我工作。有沒有人有使用angular2的文件上傳工作演示，請幫助我。

component.html

<form class="form-horizontal" role="form" > 

     <div class="form-group"> 
      <label class="control-label col-sm-4" for="myname" style="">Name<span class="asterisk">*</span></label> 
      <div class="col-sm-7"> 
       <div> 
        <input type="text" class="form-control" id="myname" 
        [(ngModel)]="myfile.name">       
       </div>     
      </div>        
     </div>   


     <div class="form-group"> 
      <label class="control-label col-sm-4" for="myimage">Image</label> 
      <div class="col-sm-7"> 
       <div> 
        <input type="file" (change)="fileChangeEvent($event)" placeholder="Upload file..." />       
       </div> 
      </div> 
     </div> 


     <div class="form-group">   
     <div class="text-center"> 
      <button type="button" (click)="upload()">Upload</button>    
     </div> 
     </div> 
    </form> 

component.ts

 myfile={ 
       "name":"Mubashshir",    
       "image":'' 
    } 

    fileChangeEvent(fileInput: any){ 
     this.myfile.image = fileInput.target.files;   
    } 

    upload(){ 
      this.base_path_service.PostRequest('http://128.199.190.109/api/school/schoolDetail/',this.myfile) 
      .subscribe(
       data => { 
          console.log("data submitted");       
         }, 
       err => console.log(err), 
       () =>{ 
        console.log('Authentication Complete');      

       } 
      ); 
     } 

Answer 1

事實上，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/angular/issues/10424
• https://github.com/angular/angular/pull/7310/files

Answer 2

你的HTTP服務的文件：

import { Injectable } from "@angular/core"; 
import { ActivatedRoute, Router } from '@angular/router'; 
import { Http, Headers, Response, Request, RequestMethod, URLSearchParams, RequestOptions } from "@angular/http"; 
import {Observable} from 'rxjs/Rx'; 
import { Constants } from './constants'; 
declare var $: any; 

@Injectable() 
export class HttpClient { 
    requestUrl: string; 
    responseData: any; 
    handleError: any; 

    constructor(private router: Router, 
    private http: Http, 
    private constants: Constants, 
) { 
    this.http = http; 
    } 

    postWithFile (url: string, postData: any, files: File[]) { 

    let headers = new Headers(); 
    let formData:FormData = new FormData(); 
    formData.append('files', files[0], files[0].name); 
    // For multiple files 
    // for (let i = 0; i < files.length; i++) { 
    //  formData.append(`files[]`, files[i], files[i].name); 
    // } 

    if(postData !=="" && postData !== undefined && postData !==null){ 
     for (var property in postData) { 
      if (postData.hasOwnProperty(property)) { 
       formData.append(property, postData[property]); 
      } 
     } 
    } 
    var returnReponse = new Promise((resolve, reject) => { 
     this.http.post(this.constants.root_dir + url, formData, { 
     headers: headers 
     }).subscribe(
      res => { 
      this.responseData = res.json(); 
      resolve(this.responseData); 
      }, 
      error => { 
      this.router.navigate(['/login']); 
      reject(error); 
      } 
    ); 
    }); 
    return returnReponse; 
    } 
} 

調用函數（組件文件）：

onChange(event) { 
    let file = event.srcElement.files; 
    let postData = {field1:"field1", field2:"field2"}; // Put your form data variable. This is only example. 
    this._service.postWithFile(this.baseUrl + "add-update",postData,file).then(result => { 
     console.log(result); 
    }); 
} 

您的html代碼：

<input type="file" class="form-control" name="documents" (change)="onChange($event)" [(ngModel)]="stock.documents" #documents="ngModel"> 

Answer 3

改進的onChange（）方法：

file: File; 
    onChange(event: EventTarget) { 
     let eventObj: MSInputMethodContext = <MSInputMethodContext> event; 
     let target: HTMLInputElement = <HTMLInputElement> eventObj.target; 
     let files: FileList = target.files; 
     this.file = files[0]; 
     console.log(this.file); 
    } 

Answer 4

Here is the Angular 2 version

我們需要實施在我們的之一拖放文件輸入功能應用程序。

我們爲此選擇了ng-file-upload。

我們試着按照help page。至於建議，實施drag-upload-input.html & drag-upload-input.component.ts類似如下：

拖上載input.html

<!-- we only need single file upload --> 
<input type="file" ng2FileSelect [uploader]="uploader" /> 

拖上載input.component。TS

import { Component } from '@angular/core'; 
import { FileUploader } from 'ng2-file-upload'; 

// const URL = '/api/'; 
const URL = 'https://evening-anchorage-3159.herokuapp.com/api/'; 

@Component({ 
    moduleId: module.id, 
    selector: 'drag-upload-input', 
    templateUrl: './drag-upload-input.html' 
}) 
export class DragUploadInput { 
    public uploader: FileUploader = new FileUploader({ url: URL }); 
    public hasBaseDropZoneOver: boolean = false; 
    public hasAnotherDropZoneOver: boolean = false; 

    public fileOverBase(e: any): void { 
    this.hasBaseDropZoneOver = e; 
    } 

    public fileOverAnother(e: any): void { 
    this.hasAnotherDropZoneOver = e; 
    } 
} 

的app.module.ts得到了FileUploadModule這樣的：

// File upload modules 
import { FileUploadModule } from 'ng2-file-upload'; 
import { DragUploadInput } from './file-upload/drag-upload-input.component'; 

//other imports 

@NgModule({ 
    imports: [ ... other imports 
FileUploadModule 
], 
    declarations: [ ... other declarations 
DragUploadInput], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

而且systemjs.config.js看起來是這樣的：

(function (global) { 
    System.config({ 
    // map tells the System loader where to look for things 
    map: { 
     // other libraries 
     'ng2-file-upload': 'node_modules/ng2-file-upload', 
    }, 
    packages: { 
     // other packages 
     ng2-file-upload': { 
     main: 'ng2-file-upload.js', 
     defaultExtension: 'js' 
     } 
    } 
    }); 
})(this); 

source