upload组件onDownload方法配置（附下载方法）

antdesign+React中upload组件onDownload方法配置，附下载

前几天在react+antd的后台项目中使用upload组件时，提出了下载需求，upload组件默认有两个icon，预览和删除，在没有设置预览的情况下，点击预览会直接在新窗口打开文件地址，官方文档中的onPreview：

onPreview	点击文件链接或预览图标时的回调	function(file)	-

而官方文档中的onDownload：

onDownload	点击下载文件时的回调，如果没有指定，则默认跳转到文件 url 对应的标签页	function(file): void	(跳转新标签页)

一开始认为如果不写自定义onPreview，点了预览按钮调用了onDownload，打开了新页面，但是自定义onDownload方法的时候，点击预览按钮，却没有调用handleDownload。

  <Upload
      listType="picture-card"
      fileList={fileList}
      onDownload={handleDownload}
   >

  const handleDownload = (file: any) => {
    console.log(file);
  };

后来查阅资料发现想调用onDownload的回调函数需要为组件添加下载按钮，然后通过点击下载按钮调用。

showUploadList={{ showDownloadIcon: true }}     //展示下载按钮

配置完之后，就可以调用下载，以下是完整代码（包含下载函数）

   <Upload
     listType="picture-card"
     fileList={fileList}
     showUploadList={{ showDownloadIcon: true }}
     onDownload={handleDownload}
   >

  //blob处理
  const getBlob = (url: string, cb: any) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.responseType = 'blob';
    xhr.onload = function () {
      if (xhr.status === 200) {
        cb(xhr.response);
      }
    };
    xhr.send();
  };
  //文件路径处理
  const saveAs = (blob: any, filename: string) => {
    const link = document.createElement('a');
    const body = document.querySelector('body');
    link.href = window.URL.createObjectURL(blob);
    link.download = filename;
    // fix Firefox
    link.style.display = 'none';
    body!.appendChild(link);
    link.click();
    body!.removeChild(link);
    window.URL.revokeObjectURL(link.href);
  };
  //下载文件
  const handleDownload = (file: any) => {
    //这里的file做了处理是调用后端接口后返回了路径，前端拼接，所以有自定义的url和name。
    //url即下载路径，name即文件保存的名称。
    getBlob(file.url, function (blob: any) {
      saveAs(blob, file.name);
    });
  };

好了，到此onDownload回到函数配置完成，如果帮到了你，麻烦点个赞吧~