實施ng2-file-upload

Question

我正在嘗試嘗試使用ng2-file-upload，但由於自述文件稀疏，因此在理解如何實現它方面遇到一些麻煩。 是否還有其他細節可以幫助我開始這一工作。 我正在嘗試創建一個演示應用程序以上傳圖像並將其保存在服務器中作為開始。

我在這里簽出了演示頁面， http：//valor-software.com/ng2-file-upload/

有人可以幫助的幾個問題。

1. 對於打字稿頁面，const URL引用一個API，在示例中，它是' https://evening-anchorage-3159.herokuapp.com/api/ '。

2. demo / component / file-upload目錄中有一個file-catcher.js文件。 誰能解釋這是什么以及是否需要它？ 看起來像個快遞應用。

或者也歡迎實現圖像上傳功能的任何其他方式。 謝謝。

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

在html模板中：

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

Answer 2

按順序回答您的問題

1）常量URL， https： //evening-anchorage-3159.herokuapp.com指的是應用程序運行所在的BASE_URL，而/ api指的是文件更新需要調用的路徑。 因此，在您的應用程序中，必須包含BASE_URL，后跟/ api才能上傳文件。

2）File-catcher.js文件是最重要的文件，實際上是使用multer包在快遞服務器中執行上載的。 如果您不使用快速服務器，則必須在服務器中包括multer軟件包才能上傳文件。 我建議您閱讀本教程和有關multer的內容，以更好地理解和輕松使用。