Ant Design Vue 中 Upload 组件实现添加下载图标及触发download事件

如果可以，可以如果

已于 2024-03-25 19:03:46 修改

阅读量1.2k

点赞数 3

文章标签： vue.js 前端 javascript

于 2024-03-25 19:02:32 首次发布

本文链接：https://blog.csdn.net/qq_43687594/article/details/137018374

版权

本文详细描述了在AntDesignVue的Upload组件中遇到的附件上传问题，重点在于如何使download事件生效，即通过设置`showUploadList`中的`showDownloadIcon`为true，并配合API实现下载功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用Ant Design Vue 中 Upload组件时，经常遇见附件上传的一些问题，本次汇总记录下遇见的问题及解决方案，以免后续忘记又浪费时间苦思冥想的......

给上传组件添加下载图标，解决download的事件不执行的问题

在这里插入图片描述
看到这个download事件时，我下意识的以为，当我点击上传的文件名称弹出的下载弹窗时，就应该执行了该方法，但是其实他并没有执行，后来发现，这个下载事件是需要搭配API的showUploadList参数，只有给组件添加了:showUploadList=“{showDownloadIcon: true }”，此时点击文件列表尾部的下载icon，才会触发download事件
在这里插入图片描述

 <a-upload
      name="file"
      :multiple="true"
      :action="uploadUrl"
      :headers="headers"
      :file-list="fileList"
      :showUploadList="{showDownloadIcon: true }" //展示上传列表的功能图标showDownloadIcon下载
      @download="download"  //下载事件
      @change="handleChange"
    >
      <a-button>
        <a-icon type="upload" />
        上传附件
      </a-button>
    </a-upload>