antd Upload组件使用customRequest消除默认action行为

最新推荐文章于 2024-08-02 10:52:24 发布

圆滚滚的程序媛

最新推荐文章于 2024-08-02 10:52:24 发布

阅读量1.4k

点赞数 2

本文链接：https://blog.csdn.net/qq_16933879/article/details/130580145

版权

ant design 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

antd Pro

1 篇文章 0 订阅

订阅专栏

当upload组件未设置action时，会默认提交到当前页面。为避免这种情况，需使用customRequest配合onChange进行自定义处理。文章中展示了如何在上传前校验文件类型，读取Excel内容并将其转换为数组，同时处理上传的各种状态，如成功、失败或移除。

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

当使用upload组件未填写action地址时，组件会默认发起请求，此时请求的地址是当前浏览器地址

为了消除这种默认行为，需要采用customRequest，并结合onChange属性做出相应的处理

代码如下：

const uploadParam: UploadProps = {
    accept: 'application/vnd.ms-excel,application/vnd.openxmlformats- 
          officedocument.spreadsheetml.sheet', // 指定上传文件类型
    maxCount: 1, // 数量
    beforeUpload(file) { // 上传前校验文件类型
      if (file.type !== 'application/vnd.ms-excel' && file.type !== 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') {
        message.error('文件类型错误, 只支持.xls,.xlsx格式');
        return false;
      }
      return true;
    },
    customRequest(info: any) {// 读取上传的文件，将excel转换为数组
      const reader = new FileReader();
      const { file } = info;
      reader.readAsBinaryString(file);
      reader.onload = async (e) => {
        const data = e.target?.result;
        const zzexcel = XLSX.read(data, { // 需要因为xlsx插件
          type: 'binary',
        });
        let newData: any = XLSX.utils.sheet_to_json(zzexcel.Sheets[zzexcel.SheetNames[0]]);
      
        message.success(`${file.name} 上传成功`);
        info.onSuccess(newData, file); // 不执行该代码，上传的进度条会一直存在
      
      }
    },
    onChange(info: any) {
      const { file } = info;
      if (file.status === 'uploading') { 
        
      }
      if (file.status === "removed") {
      
      }
      if (file.status === 'error') {
       
        message.error('文件上传失败');
      }
      if (file.status === 'done') {
       
      }
     
    },
   
  };