image.png

input标签中type为file显示的是比较传统的file上传UI标签。

<!--html:-->
<div class="upload-file" (click)="chooseFile.click()">
     <span *ngIf="fileName">{{fileName}}</span>
     <span class="placeholder" *ngIf="fileName === null">Choose xlsx/xls file (max file size 10M)...</span>
     <i nu-icon [name]="'0325_file_selector'" class="file-icon"></i>
     <input type="file" class="file" #chooseFile (change)="getFile($event)" accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">
</div>

// scss:
.upload-file{
  border: 1px solid #CCCCCC;
  padding-left: 10px;
  height: 34px;
  line-height: 34px;
  position: relative;
  background: #FFFFFF;
  margin-bottom: 20px;
  &:hover {
    cursor: pointer;
  }
}
.placeholder{
  color: #999999;
}
.file-icon{
  position: absolute;
  right: 10px;
  top: 10px;
}
.file{
  position: absolute;
  width: 100%;
  top:0;
  left: 0;
  bottom: 0;
  display: none;
}

// ts:
getFile(event) {
  // 获取上传文件的name
  this.fileName = event.target.files[0].name;
  // 获取文件的type
  const fileType = this.fileName.substring(this.fileName.lastIndexOf('.') + 1).toLowerCase();
  const reader: FileReader = new FileReader();
  // size 的单位转换为M
  let size = event.target.files[0].size; // byte
  size = size / 1024; // kb
  size = size / 1024; // mb
  //解析文件
  reader.onload = (e: any) => {
     const bstr: string = e.target.result;
     const wb: XLSX.WorkBook = XLSX.read(bstr, {type: 'binary'});
     const firstSheet: string = wb.SheetNames[0];
     const ws: XLSX.WorkSheet = wb.Sheets[firstSheet];
     // 去掉字段名的空格及* 
     ws.A1.w = ws.A1.w.replace(/\s/g, '');
     ws.A1.w = ws.A1.w.replace('*', '');
     ....（省略其他标签的操作，重复代码）
     const data: FileData[] = XLSX.utils.sheet_to_json(ws);
     // data即为获取的解析的数据
  }
}