javascript - 实现 ng2 文件上传

Question

我正在尝试尝试使用 ng2-file-upload 但在理解如何实现它方面遇到一些困难，因为自述文件非常稀疏。还有更多详细信息可以帮助我开始这方面的工作吗？我正在尝试创建一个演示应用程序来上传图像并将其保存在服务器中作为开始。

我在这里查看了演示页面，http://valor-software.com/ng2-file-upload/

有几个问题希望大家能帮忙。

1. 对于 typescript 页面，const URL 指的是 API，在示例中，它是 ' https://evening-anchorage-3159.herokuapp.com/api/ '.

2. demo/component/file-upload 目录下有一个 file-catcher.js 文件。谁能解释一下它的作用以及是否需要它？看起来像是一个快捷应用程序。

或者任何其他方式来实现图片上传功能也是受欢迎的。谢谢。

Answer 1

您是否尝试过在没有 3rd-Party 的情况下上传？

服务:

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>