html代码
<nz-upload *ngIf="uploadParams.parserTypeId==3 || uploadParams.parserTypeId==4" style="margin-left:10px"
[nzAction]="_uploadPath"
[nzHeaders]="{ Authorization: 'multipart/form-data' }"
[nzData]="uploadParams"
(nzChange)="handleChange($event)"
[nzBeforeUpload]="beforeFileUpload"
[nzRemove]="fileListRemove"
[nzShowUploadList]="icons"
[nzFileList]="_fileList"
>
<button nz-button>
<i nz-icon nzType="upload"></i>
上传文件
</button>
</nz-upload>
ts代码
/** 上传文件时传递的参数 */
public uploadParams: any = {};
public _uploadPath: any = parserApiPath.uploadFiles;
public _fileList: NzUploadFile[] = [];
/** 上传文件类型 _/
public fileType: string = ".csv, .xlsx, .xls"; //文件类型
/* 选择excel或者json时将表达式置灰 /
public flagExam: boolean = false;
/_* 上传的icon图标 */
icons: NzShowUploadList = {
showPreviewIcon: true,
showRemoveIcon: true,
showDownloadIcon: false
};
public handleChange(e: any): void {
//判断有没有选择上传类型
if (!this._form.value.parserType) {
console.log("请选择类型");
} else {
e.fileList.map((element: any) => {
if(element.response){
this.path.push(element.response.data);
}
});
//将上传重复的文件去重
this.path = Array.from(new Set(this.path));
const parserOpt = this._currentParserOption;
if (!parserOpt) {
return;
}
const parserId = parserOpt.origin.id;
const fieldParserOptions: FieldParserOption[] = [];
let parameter = parserOpt.origin.dataParserTemplateParameterVO[0];
for (let pa in this.path){
const opt: FieldParserOption = {
parserId: parserId,
parserTemplateParameterId: parameter.id,
value: this.path[pa],
};
fieldParserOptions.push(opt);
}
this._fieldMappingContext.setDataParserParameters(fieldParserOptions);
}
}
//上传前参数判断
beforeFileUpload = (file: any) =>
new Observable((observer: Observer) => {
const isLt100M = file.size! / 1024 / 1024 <= 100;
if (!isLt100M) {
this.modal.error({
nzTitle: "解析失败",
nzContent: "文件大小不要超过100MB!",
});
observer.complete(); return;
}
const fileType =file.name.split(".")[1]
const fileTypes =this._form.value.parserType
let isType =true
if(fileTypes="excel"){
isType = fileType === 'xlsx' || file.type === 'xls'
}else if(fileTypes="csv"){
isType = fileType === 'csv';
}else{
alert("请核对类型");
}
if (!isType) {
console.log('只支持xlsx、xls、csv类型!');
this.modal.error({
nzTitle: "解析失败",
nzContent: "请核对上传的文件类型!",
});
observer.complete();
return;
}else{
observer.next(true); observer.complete();
}
});rver.complete(); return;
}
//删除文件操作
fileListRemove = (file: any) =>
new Observable((observer: Observer) => {
let that = this;
this.modal.confirm({
nzTitle: "操作确认",
nzContent: "是否确认删除?",
nzOkText: "确定",
nzCancelText: "取消",
nzOnOk() {
//删除操作
console.log(file,"file.response.data")
// console.log(that.path,"file.response.data")
console.log(that.path,"file.response.data")
that.path.splice(that.path.findIndex((item: any) => item == file.url), 1);
that._fileList.splice(that._fileList.findIndex((item: any) => item.url == file.url), 1);
observer.next(true);
observer.complete();
},
nzOnCancel() {
observer.next(false);
observer.complete();
}
});
});
手机扫一扫
移动阅读更方便
你可能感兴趣的文章