实现NG2文件上传

Answer 1

你试过没有第三方上传吗？

服务：

export class WebService {

constructor(private http:Http) {

}

 public makeFileRequest(files:File[]):Observable<any> {
   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.open('POST', CONSTS.baseURL + "/api/uploadFile", true);
       xhr.send(formData);
   });
}

在组件中：

import {Component, NgZone} from "@angular/core";
import {WebService} from "../services/services";
@Component({
 templateUrl:"./your.template.html"
})

 export class YourComponent{
 public fileEvent=null;
 private fileName;
 public validTypes = ["application/vnd.openxmlformats-officedocument.wordprocessingml.document","application/msword","application/pdf"];
 private errorFileType:boolean = false;
 private fileUploadedSuccessFully:boolean = false;
 private uploading:boolean = false;
 public uploadingMessage = "Gönder";

 constructor(public webService:WebService,public zone:NgZone){

 }
 uploadFile(event){
   if(this.validTypes.indexOf(event.target.files[0].type)!=-1){
       this.fileEvent = event;
       this.fileName = event.target.files[0].name;
       this.errorFileType = false;
   }
   else {
       this.errorFileType = true;
   }
 }
   upload(){
   this.uploading = true;
   this.uploadingMessage = "Yükleniyor";

   this.webService.makeFileRequest(this.fileEvent.target.files).subscribe((data)=>this.zone.run(()=>{
       this.fileUploadedSuccessFully = true;
       this.uploadingMessage = "Yüklendi!";
   }));
}

 <input type="file" (change)="uploadFile($event)">
 <span (click)="uploading==false?upload():null" [ngClass]="{'upload-disable': uploading==true}">{{uploadingMessage}}</span>