# Umbraco 文件上传预览 ## 这是什么？文件上传预览是自定义 Web 组件，可在 Umbraco 中上传期间呈现特定文件类型的预览。它们允许您根据 MIME 类型创建文件的视觉表示，例如显示图像的缩略图、音频的波形或特定文件格式的自定义图标。 ## 文档在实施之前始终获取最新文档： * **基础** ： * **扩展注册表**： * **Umbraco 元素**： ## 相关基础技能 * **Umbraco Element** ：用于创建 UI 组件的基类 * 参考技能：`umbraco-umbraco-element` ## 工作流程 1. **获取文档** \- 在上面的 URL 上使用 WebFetch 2. **提出问题** \- 什么 MIME 类型？什么预览显示？ 3. **生成文件** \- 根据最新文档创建清单+元素 4. **解释** \- 显示创建的内容以及如何测试 ## 最小示例 ### 清单（manifests.ts）导出 const 清单：Array = [ { 类型：'文件上传预览'，别名： 'My.FileUploadPreview.Custom', name: '自定义文件上传预览', 重量：100，元素：() => import('./my-file-preview.element.js'), forMimeTypes: ['application/pdf', 'application/x-pdf'], }, ]; ### 元素实现 (my-file-preview.element.ts) 从 '@umbraco-cms/backoffice/external/lit' 导入 { html, customElement, property, state }; 从 '@umbraco-cms/backoffice/lit-element' 导入 { UmbLitElement }；从 '@umbraco-cms/backoffice/media' 导入类型 { UmbFileUploadPreviewElement }； @customElement('我的文件预览') 导出类 MyFilePreviewElement 扩展 UmbLitElement 实现 UmbFileUploadPreviewElement { @property({ 类型：对象 }) 文件？：文件； @状态（）私人_previewUrl？：字符串；覆盖更新（changedProperties：地图<字符串，未知>）{ if (changedProperties.has('file') && this.file) { this._previewUrl = URL.createObjectURL(this.file); } } 重写disconnectedCallback() { super.disconnectedCallback(); 如果（this._previewUrl）{ URL.revokeObjectURL(this._previewUrl); } } 覆盖渲染（）{ if (!this.file) return html``; 返回 html`

${this.file.name}

`; } } 导出默认的 MyFilePreviewElement； ## 接口参考接口 ManifestFileUploadPreview 扩展 ManifestElement { 类型：'文件上传预览'； forMimeTypes: 字符串 |数组<字符串>； // 例如，'image/*', ['image/png', 'image/jpeg'] } 接口 UmbFileUploadPreviewElement { 文件？：文件； } ## 常见 MIME 类型模式 * `image/*` \- 所有图像类型 * `video/*` \- 所有视频类型 * `audio/*` \- 所有音频类型 * `application/pdf` \- PDF 文件 * `*/*` \- 所有类型的后备（使用较低的权重）就是这样！始终获取新文档，保持示例最少，生成完整的工作代码。

Umbraco 文件上传预览

包含技能