Ant Design Vue 中 Upload 组件下载download和删除remove 的使用

最新推荐文章于 2024-06-24 19:39:11 发布

我是真的狗

最新推荐文章于 2024-06-24 19:39:11 发布

阅读量1.4w

点赞数 32

分类专栏： ant design vue 踩坑记录文章标签： vue js 前端

本文链接：https://blog.csdn.net/wanghuan1020/article/details/107811010

版权

本文详细介绍了在Ant Design Vue的Upload组件中如何实现文件的删除（remove）和下载（download）功能。在删除操作中，不仅从前端移除文件，还实现了与后台服务器的同步删除。在下载功能的实现中，通过研究官方文档和解决版本问题，最终成功添加了下载图标并触发下载事件。

摘要由CSDN通过智能技术生成

Ant Design Vue 中 Upload 组件下载 download和删除 remove 的使用

Upload组件的基本使用

先来看看官方给出的案例

<template>
  <div>
    <a-upload
      action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
      list-type="picture"
      :default-file-list="fileList"
    >
      <a-button> <a-icon type="upload" /> upload </a-button>
    </a-upload>
  </div>
</template>
<script>
export default {
   
  data() {
   
    return {
   
      fileList: [
        {
   
          uid: '-1',
          name: 'xxx.png',
          status: 'done',
          url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
          thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
        },
        {
   
          uid: '-2',
          name: 'yyy.png',
          status: 'done',
          url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'