要解决文件列表中图标不显示的问题,可以尝试以下示例代码:

在组件中定义一个变量,用于指定文件列表中图标的类型:

fileIconMap = {
  'image/jpeg': 'fa fa-file-image-o',
  'image/png': 'fa fa-file-image-o',
  'image/gif': 'fa fa-file-image-o',
  'application/pdf': 'fa fa-file-pdf-o',
  'application/msword': 'fa fa-file-word-o',
  'application/vnd.openxmlformats-officedocument.wordprocessingml.document': 'fa fa-file-word-o',
  'application/vnd.ms-excel': 'fa fa-file-excel-o',
  'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': 'fa fa-file-excel-o',
  'application/vnd.ms-powerpoint': 'fa fa-file-powerpoint-o',
  'application/vnd.openxmlformats-officedocument.presentationml.presentation': 'fa fa-file-powerpoint-o',
  'text/plain': 'fa fa-file-text-o',
  'application/zip': 'fa fa-file-archive-o',
  'application/x-rar-compressed': 'fa fa-file-archive-o',
  'application/x-msdownload': 'fa fa-file-archive-o',
  'application/octet-stream': 'fa fa-file-o'
};

在模板中,使用nzCustomContent属性自定义文件列表的内容,并根据文件类型动态展示图标:

<nz-upload nzType="drag" [nzAction]="uploadUrl" [(nzFileList)]="fileList" 
  (nzChange)="handleChange($event)" [nzAccept]="acceptFileType" [nzMultiple]="false" [nzBeforeUpload]="beforeUpload" [nzSize]="fileSize"
  [nzLimit]="fileCount" [(ngModel)]="name">
  <i class="fa fa-cloud-upload" aria-hidden="true" style="font-size:70px"></i>
  <div style="display:flex;justify-content: center;">
    <div class="ant-upload-text">将文件拖到此处,或</div>
    <div class="ant-upload-text" style="color: #2727d8;text-decoration:underline;font-size: 14px;cursor: pointer;">点击上传</div>
  </div>
  <ng-template #customContent>
    <ul class="ant-upload-list ant-upload-list-text">
      <li *ngFor="let file of fileList" class="ant-upload-list-item">
        <i [ngClass]="fileIconMap[file.type]"></i>
        <span class="ant-upload-list-item-name">{{ file.name }}</span>
        <span class="ant-upload-list-item-actions">
          <a [href]="file.url" target="_blank" download>
            <i class="fa fa-download"></i>
          </a>
          <i class="fa fa-close" (click)="handleRemove(file)"></i>
        </span>
      </li>
    </ul>
  </ng-template>
</nz-upload>

请注意,示例代码使用了Font Awesome图标库,确保在项目中引入了Font Awesome的样式文件。同时,根据文件类型,可以根据需要自定义图标样式

nz-upload nzType=drag nzAction=uploadUrl nzFileList=fileList nzChange=handleChange$event nzAccept=acceptFileType nzMultiple=false nzBeforeUpload=beforeUpload nzSize=fileSize nzLimit=f

原文地址: http://www.cveoy.top/t/topic/i1R3 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录