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