前端实现文件上传——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();

}

});

});