import {Component, Input} from "@angular/core"; import {FileUploader} from "ng2-file-upload"; import {BaseComponent} from './base.component'; declare var restRoot: string;; @Component({ moduleId: module.id, selector: "iisp-file-upload", template: ` ` }) export class FileUploadComponent extends BaseComponent{ @Input() fileUploadInfo: FileUploadInfo; index = 0; public uploader = new FileUploader({ url: restRoot + "/common/files/upload", method: "POST", itemAlias: "uploadedfile" }); // 定义事件,选择文件 selectedFileOnChanged(event: any) { // 打印文件选择名称 this.uploadFile(this.fileUploadInfo); } // 定义事件,上传文件 uploadFile(fileUploadInfo: FileUploadInfo) { // 上传 console.debug("length: " + this.uploader.queue.length); this.uploader.queue[this.index].onSuccess = function(response, status, headers) { fileUploadInfo.uploading = false; // 上传文件成功 if (status == 200) { // 上传文件后获取服务器返回的数据 console.debug(response); let tempRes = JSON.parse(response); console.debug("tempRes.uploadPaths:" + tempRes.uploadPaths); fileUploadInfo.uploadedFiles = fileUploadInfo.uploadedFiles.concat(tempRes.uploadPaths); fileUploadInfo.iconClass = "successmini"; fileUploadInfo.message = "Uploaded"; } else { fileUploadInfo.iconClass = "errormini"; fileUploadInfo.message = "Upload failed"; } }; //fileUploadInfo.uploadedFiles = null; this.uploader.queue[this.index].upload(); // 开始上传 this.index++; fileUploadInfo.uploading = true; fileUploadInfo.iconClass = "loadingmini"; fileUploadInfo.message = "Uploading"; } isRunning(): boolean{ return false;} } export class FileUploadInfo { uploadedFiles: string[] = new Array(); fileInputValue: string; uploading: boolean = false; iconClass = "blankmini"; message: string; allowedFileType: string; constructor(allowedFileType?: string) { if (allowedFileType) { this.allowedFileType = allowedFileType; } } reset():void { this.fileInputValue = ""; this.uploading = false; this.message = ""; this.iconClass = "blankmini"; } }