前端实现文件上传——angular版本+ant design

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();
}
});

});