ant a-upload fileList 增加下载

### 实现文件列表下载功能 为了在 `a-upload` 组件的 `fileList` 中添加下载功能，可以通过自定义渲染每一项文件的方式实现。具体来说，利用 `renderUploadList.itemRender` 插槽来自定义文件列表中的每一个条目，在其中加入下载按钮并绑定相应的下载逻辑。 #### 自定义文件列表项 通过设置 `itemRender` 属性，可以控制每个文件项的具体展示形式。对于需要增加的功能——即下载链接或按钮，可以在该属性对应的函数内部完成构建： ```jsx import { DownloadOutlined } from '@ant-design/icons-vue'; // 定义 itemRender 函数用于定制化每一条目的显示方式 const customItemRender = (originNode, file) => ( <div> {/* 原始节点 */} {originNode} {/* 添加下载图标 */} <DownloadOutlined onClick={() => handleDownload(file)} /> </div> ); ``` 上述代码片段展示了如何向默认的文件条目旁边追加一个下载图标的例子[^1]。 #### 下载处理方法 当点击下载图标时，应触发实际的下载操作。这通常涉及到创建临时的 `<a>` 标签，并将其 `href` 设置为目标资源的位置，同时模拟用户的点击动作以启动下载过程： ```javascript function handleDownload(file){ const link = document.createElement('a'); link.href = URL.createObjectURL(new Blob([file.originFileObj])); link.download = file.name; link.click(); window.URL.revokeObjectURL(link.href); // 清理内存 } ``` 这段 JavaScript 代码实现了基于传入的文件对象发起一次下载请求的过程[^2]。 #### 整合至上传组件配置 最终，将这些部分组合在一起应用到 `a-upload` 上即可达成目标效果： ```vue <template> <a-upload :customRequest="false" :listType="'text'" :showUploadList="{ showRemoveIcon: true, itemRender: customItemRender }"> Click to upload files </a-upload> </template> <script setup lang="ts"> import { ref } from 'vue'; import { DownloadOutlined } from '@ant-design/icons-vue'; let fileList = ref([]); const customItemRender = (originNode, file) => { return ( <div> {originNode} <DownloadOutlined class="ml-2 cursor-pointer" @click.stop={(e) => handleDownload(e, file)} /> </div> ); }; function handleDownload(event, file){ event.stopPropagation(); // 阻止冒泡影响父级元素交互 let url = URL.createObjectURL(new Blob([file.originFileObj])); let aTag = document.createElement("a"); aTag.style.display = "none"; aTag.href = url; aTag.setAttribute("download", file.name || new Date().getTime()); document.body.appendChild(aTag); aTag.click(); document.body.removeChild(aTag); URL.revokeObjectURL(url); } </script> ``` 此段完整的 Vue SFC 模板演示了怎样把前面提到的各项技术细节融入到 Ant Design 的 `a-upload` 组件中去，从而实现在文件列表里提供便捷的下载选项[^3]。