antd upload 文件手动上传和文件下载

原创已于 2022-12-30 09:14:46 修改 · 2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #react.js

于 2022-12-26 10:55:50 首次发布

react 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种通过React的Upload组件手动上传文件的方法，并详细解释了如何利用beforeUpload阻止默认上传行为，以及如何通过FormData收集文件进行自定义上传。此外，还提供了文件下载的实现方式，包括使用fetch发起请求及通过创建a标签实现文件下载。

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

一、文件手动上传，区别于用action=‘接口地址’的方法
①属性定义

 const props: UploadProps = {
    name: 'file',
    //这个属性必须写
    beforeUpload: file => {
      setFileList([file]);
      return false;
    },
    onRemove: file => {
    //
    },
    fileList,
  };

②组件代码

 <Upload
   {...props}
   fileList={fileList}
   onChange={handleChange}
 >
{/* */}
 </Upload>

③真正上传代码

  const handleChange: UploadProps['onChange'] = async () => {
    try {
      const formData = new FormData();
      //只能用beforeonload的参数当做遍历的值fileList
      fileList.forEach(file => {
        formData.append('file', file as RcFile);
      });
    //这里就可以调接口了，formData就是需要的参数
    } catch (error) {
      //
    }
  };

二、文件的下载

 const downloadFile = async () => {
    try {
      //调接口
       const res= await fetch('接口', {
        method: 'POST',
        body: JSON.stringify({参数对象}),
        headers: {
         //
        },
      });
      if(res){
        const blob = await res.blob();
        const a = document.createElement('a');
        document.body.appendChild(a);  
        const url = window.URL.createObjectURL(blob); 
        const link = document.createElement('a');  
        link.style.display = 'none';
        link.href = url;  
        link.download = 'name.doc'; //设置文件名 
        document.body.appendChild(link);
        link.click();
        URL.revokeObjectURL(link.href); // 释放 URL对象
        document.body.removeChild(link);
        }
    } catch (error) {
  //
    }
  };