UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载在 ng-zorro-antd 的上传组件Upload中nzListTypepicture会在上传列表中以缩略图形式展示图片文件用户选择本地图片后浏览器即可通过FileReader.readAsDataURL读取文件内容在列表里即时渲染出本地预览图对于历史文件或旧浏览器场景则可以通过thumbUrl字段直接指定缩略图地址。本文以仓库中 picture-style 示例 及其配套源码为主线讲解图片列表样式的完整配置、本地缩略图的底层实现原理、thumbUrl的兼容替代方案以及文件状态与图标渲染的细节帮助你直接复用到真实业务中。一、Demo 速览图片列表样式长什么样components/upload/demo/picture-style.ts是这一特性的最小可运行示例。核心要点只有两处给nz-upload设置nzListTypepicture让上传列表以文件名 缩略图的横向行式展示通过双向绑定[(nzFileList)]传入初始文件列表列表项可以混合uploading上传中、done完成、error失败三种状态。完整示例代码如下与仓库 demo 一致import { Component, signal } from angular/core; import { NzButtonModule } from ng-zorro-antd/button; import { NzIconModule } from ng-zorro-antd/icon; import { NzUploadFile, NzUploadModule } from ng-zorro-antd/upload; Component({ selector: nz-demo-upload-picture-style, imports: [NzButtonModule, NzIconModule, NzUploadModule], template: nz-upload nzActionhttps://660d2bd96ddfa2943b33731c.mockapi.io/api/upload nzListTypepicture [(nzFileList)]fileList button nz-button nz-icon nzTypeupload / Upload /button /nz-upload }) export class NzDemoUploadPictureStyleComponent { readonly fileList signalNzUploadFile[]([ { uid: 0, name: xxx.png, status: uploading, percent: 33 }, { uid: -1, name: yyy.png, status: done, url: https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png, thumbUrl: https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png }, { uid: -2, name: zzz.png, status: error } ]); }demo 展示的三种文件形态恰好对应了图片列表样式在日常使用中的三类场景状态关键字段列表中的表现上传中status: uploading、percent: 33显示 loading 图标与进度条nz-progress已完成status: done、url、thumbUrl显示缩略图缩略图与文件名均可点击预览/跳转失败status: error显示错误图标悬停可看到错误信息二、核心配置nzListType 三种内建列表样式nzListType是决定上传列表外观的入口参数类型定义在 interface.ts/** Built-in styles of the uploading list. */ export type NzUploadListType text | picture | picture-card;text默认值仅展示文件名与状态图标最简洁picture本文主角每个文件一行图片文件显示缩略图非图片文件显示文件类型图标picture-card卡片式照片墙布局缩略图占满卡片上传按钮会在达到数量上限时消失参见 picture-card 示例。从 upload.component.ts 源码可以看到默认值为text组件还会根据该值生成对应的宿主 classant-upload-select-text/ant-upload-select-picture/ant-upload-select-picture-card以及ant-upload-picture-card-wrapper包装类。也就是说选择哪种列表样式本质上就是切换 ng-zorro-antd 预置的整条列表渲染管线与样式体系。三、本地缩略图原理FileReader 与 Canvas 的配合demo 文档的核心提示是当上传的文件是图片时可以展示本地缩略图。这一能力由上传列表组件 upload-list.component.ts 中的genThumb()与previewImage()实现机制如下列表渲染时ngOnChanges阶段genThumb()过滤出有原始文件对象originFileObj instanceof File且尚未设置thumbUrl的图片项对这些项调用previewImage()先判断文件 MIME 类型是否以image/开头isImageFileType随后创建一个 200×200 的隐藏canvas用URL.createObjectURL(file)生成对象 URL 并加载到Image上按cover 式等比缩放绘制到 canvas宽高比不一致时自动裁剪居中MEASURE_SIZE 200再通过canvas.toDataURL()得到 dataURL将 dataURL 写回file.thumbUrl并触发变更检测列表即刷新出本地缩略图绘制完成后会移除 canvas 并URL.revokeObjectURL(objectUrl)释放对象 URL。这段逻辑依赖浏览器原生能力与FileReader.readAsDataURL同源——这正是 demo 文档提醒IE8/9 不支持浏览器本地缩略图展示的原因。在旧版本 IE 中FileReader与canvas.toDataURL均不可用genThumb()中的能力检测会直接短路返回源码中对window.FileReader、window.File做了显式存在性判断此时列表无法自动生成缩略图。四、兼容方案用 thumbUrl 显式指定缩略图针对不支持本地缩略图的场景demo 文档给出的替代方案非常直接在文件对象上编写thumbUrl属性来代替。thumbUrl是 NzUploadFile 的可选字段语义为缩略图地址。当列表项带有thumbUrl时genThumb()会跳过该文件file.thumbUrl undefined才处理直接以你提供的地址渲染缩略图。demo 中已完成文件的写法就是典型范例{ uid: -1, name: yyy.png, status: done, url: https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png, thumbUrl: https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png }两种取值方式适用场景不同可按需组合自动生成现代浏览器不写thumbUrl由组件用 canvas 把本地文件压缩成 200×200 的 dataURL 缩略图适合用户刚选完文件的即时反馈手动指定兼容/历史数据显式设置thumbUrl指向后端返回的缩略图地址如 CDN 上由服务端生成的缩略图适合 IE8/9、服务端预生成缩略图、以及从数据库回显历史文件等场景。五、图片判定逻辑isImageUrl 如何决定渲染分支列表对每个文件会先判定是否为有效图片再决定渲染缩略图还是文件图标。判定函数isImageUrl()upload-list.component.ts的执行顺序是文件 MIME 类型以image/开头 → 直接判定为图片否则取thumbUrl || url按后缀名匹配webp | svg | png | gif | jpg | jpeg | jfif | bmp | dpg或data:image/前缀的 base64 → 判定为图片data:开头的其他 base64、带其他后缀名的 URL → 判定为非图片无后缀名 → 默认按图片处理。在实际渲染模板 upload-list.component.html 中判定为图片的项输出img classant-upload-list-item-image [src]file.thumbUrl || file.url缩略图优先取thumbUrl判定为非图片或上传中的文件则走图标分支picture样式下为 loading 图标或picture/file双色图标。若你希望干预这一判定例如图片 URL 是非标准格式可以传入nzPreviewIsImage回调自定义规则。六、文件状态与列表交互细节picture列表样式的状态机与图标、操作按钮的联动可以从模板中直接看出以下均为仓库真实行为上传中不渲染缩略图显示 loading 图标和nz-progress细进度条nzStrokeWidth2、隐藏百分比文字对应file.percent字段已完成渲染缩略图picture样式在行尾提供下载仅done状态与删除两个操作图标下载默认通过window.open(file.url)打开新标签页可用nzDownload覆盖失败悬停时通过nz-tooltip展示file.response字符串或file.error.statusText构成的错误信息文件名点击若定义了nzPreview回调则触发预览否则按href打开链接。文件状态流转start → progress → success/error → removed由 upload.component.ts 内部的onStart/onProgress/onSuccess/onError/onRemove驱动并通过(nzChange)事件向外抛出{ file, fileList, event, type }详见 Upload API 文档。七、延伸从 picture 到照片墙与其他预览玩法掌握了picture样式后可以顺畅地迁移到相邻场景照片墙picture-card把nzListType换成picture-card布局变为卡片式缩略图即卡片主体操作按钮悬停浮层展示上传按钮在数量达到nzMaxCount后自动消失见 picture-card 示例头像上传单文件场景下结合nzMaxCount1与nzShowButton实现始终以最新文件替换见 avatar 示例自定义预览通过nzPreviewFile接管缩略图生成逻辑、nzIconRender自定义图标、nzFileListRender整体重写列表见 preview-file 示例 与 custom-action-icon 示例。八、小结图片列表样式nzListTypepicture是 ng-zorro-antd Upload 组件中所见即所得的典型代表现代浏览器下由组件内部FileReader canvas 管线自动产出 200×200 本地缩略图无需任何服务端参与在 IE8/9 等不支持本地缩略图的浏览器中只需为文件补充thumbUrl字段即可获得一致的展示效果。实际开发中建议结合初始文件列表[(nzFileList)]预填历史数据、借助nzChange监听上传状态、并通过nzMaxCount控制数量上限即可覆盖绝大多数图片上传业务。赞分享UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载相关推荐ng-zorro-antd Upload 照片墙Picture Card实战指南缩略图列表、数量上限与图片预览ng zorro antd Upload 照片墙Picture Card实战指南缩略图列表、数量上限与图片预览 导读 照片墙Pictures WallUI组件前端AzerothCore 魔兽世界私服部署1 小时从 0 到 1跑通可登录的 3.3.5 服务器AzerothCore 魔兽世界私服部署1 小时从 0 到 1跑通可登录的 3.3.5 服务器 AzerothCore 是运行魔兽世界 3.3.5WoTL游戏开发后端Flipper Zero FAP插件安装与构建完整指南3步搞定第三方应用Flipper Zero FAP插件安装与构建完整指南3步搞定第三方应用 把现成的 FAP 插件包拷进 SD 卡的 apps 目录重启设备Flipper固件嵌入式物联网智能硬件上一篇暗黑破坏神2宽屏高帧率补丁 D2DX 完整指南下一篇FanControl 实现雷蛇风扇控制的完整配置流程创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考