nz-upload nzType=drag nzAction=uploadUrl nzFileList=fileList nzChange=handleChange$event nzAccept=acceptFileType nzMultiple=false nzBeforeUpload=beforeUpload nzSize=fileSize nzLimit=f
要解决文件列表中图标不显示的问题,可以尝试以下示例代码:
在组件中定义一个变量,用于指定文件列表中图标的类型:
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的样式文件。同时,根据文件类型,可以根据需要自定义图标样式
原文地址: http://www.cveoy.top/t/topic/i1R3 著作权归作者所有。请勿转载和采集!