antd 中 upload的下载图标

<template>
  <div>
    <a-upload
      action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
      :default-file-list="defaultFileList"
      @download="downHandle"
      :showUploadList="{
        showRemoveIcon: true,
        showDownloadIcon: true,
      }"
      @change="changeD"
    >
      <a-button> <a-icon type="upload" /> Upload </a-button>
    </a-upload>
    <input type="file" @change="handleChange" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      defaultFileList: [
        {
          uid: "1",
          name: "xxx.png",
          status: "done",
          response: "Server Error 500", // custom error message to show
          url: "",
        },
        {
          uid: "2",
          name: "yyy.png",
          status: "done",
          url: "http://www.baidu.com/yyy.png",
        },
        {
          uid: "3",
          name: "zzz.png",
          status: "error",
          response: "Server Error 500", // custom error message to show
          url: "http://www.baidu.com/zzz.png",
        },
      ],
      downUrl: "",
    };
  },
  methods: {
    handleChange({ file, fileList }) {
      if (file.status !== "uploading") {
        console.log(file, fileList);
      }
    },
    changeD(file) {
      console.log("改变");
    },
    downHandle(file) {
      console.log(file, "点击文件");
    },
//将文件转化成base64用来测试
    handleChange(file) {
      //console.log(file, 49);
      let that = this;
      const _file = file.target.files[0];
      const reader = new FileReader();
      reader.onload = function (e) {
        that.downUrl = e.target.result;
        //console.log(that.downUrl, 58);
        that.defaultFileList[0].url = that.downUrl;
      };
      reader.readAsDataURL(_file);
    },
  },
 
};
</script>

 总结：之前一直点击都进不去download方法，现在加了以下显示图标后就可以了

1

 默认情况下直接点击文件后直接跳转到defaultFileList中点击的url，如果是执行了download方法就不默认走而是自己在里面写的逻辑了