Ant Design Vue Upload自定义上传列表

### 自定义 Ant Design Vue 的 Upload 组件文件列表样式 在 Ant Design Vue 中，`<a-upload>` 是用于处理文件上传的核心组件。默认情况下，该组件会提供一个标准的文件列表展示方式。然而，在实际开发过程中，可能需要对这个文件列表进行更精细的定制化设计。 通过分析 `UploadList` 组件源码中的 `h()` 方法实现[^1]，可以发现其核心逻辑依赖于 ReactNode 渲染机制以及自定义插槽的支持。因此，可以通过以下方法来实现自定义文件列表： #### 使用 `listType="picture-card"` 或者完全移除默认列表并手动渲染 如果希望更改默认的文件列表样式，可以选择设置属性 `listType="picture-card"` 来改变布局形式。对于更加复杂的场景，则需隐藏默认的文件列表并通过插槽 (`slot`) 手动控制显示内容。 以下是具体实现方案： ```vue <template> <div> <!-- 隐藏默认文件列表 --> <a-upload :customRequest="handleCustomRequest" :file-list="fileList" @change="handleChange" :show-upload-list="false"> <button>点击上传</button> </a-upload> <!-- 自定义文件列表区域 --> <ul class="custom-file-list"> <li v-for="(file, index) in fileList" :key="index" class="custom-file-item"> {{ file.name }} <span>{{ formatSize(file.size) }}</span> <button @click="removeFile(index)">删除</button> </li> </ul> </div> </template> <script> export default { data() { return { fileList: [] }; }, methods: { handleCustomRequest({ file }) { this.fileList.push({ uid: file.uid, name: file.name, status: 'done', size: file.size }); }, handleChange(info) { const { fileList } = info; console.log('Change:', fileList); }, removeFile(index) { this.fileList.splice(index, 1); }, formatSize(sizeInBytes) { let size = sizeInBytes / 1024; // KB if (size > 1024) { size /= 1024; // MB return `${size.toFixed(2)} MB`; } return `${size.toFixed(2)} KB`; } } }; </script> <style scoped> .custom-file-list { list-style-type: none; padding-left: 0; } .custom-file-item { margin-bottom: 8px; } </style> ``` 上述代码片段展示了如何利用 `v-for` 和 CSS 完全重写文件列表的表现形式。其中，`formatSize` 函数负责将字节大小转换成可读单位；而 `removeFile` 则允许用户交互式地管理已选文件。 另外需要注意的是，当涉及到复杂表单或者数据绑定时，还可以考虑引入其他工具库辅助完成任务，比如基于 JSON Schema 自动生成界面控件的功能模块[^2]^。 最后提到的一个应用场景涉及到了 Excel 文件解析与表格预览操作[^3]^。这通常要求额外集成第三方类库（如 SheetJS），以便支持 .xls/.xlsx 类型文档的内容提取工作。 ---