安装xlsx

npm install xlsx

引入

// 引入upload XLSX
import {
  Form,
  Row,
  Col,
  Input,
  Button,
  Card,
  Modal,
  Radio,
  Upload,
  notification,
  Icon,
} from '@/components';
import XLSX from 'xlsx';

upload设置

  const fileStores = stores.useStore('fileStores');

  // 文件列表
  const [fileDataList, setFileList] = useState([]);

 const uploadProps = {
// 上传的url
    action: `${window.ENV_Front.opsDomain}/file/`,
    method: 'post',
// 限制类型
    accept:
      '.csv,.xls,.xlsx, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel',
// 设置headers
    headers: {
      Source: 'business',
      token: auth.getToken(),
    },
// 删除文件
    onRemove: file => {
// 不管删除是否成功，都在列表中删除此文件
      const files = fileDataList.filter(v => v.url !== file.url);

      setFileList(files);
      if (file.response && file.response.code === 200) {
        const result = file.response.result;
        return fileStores.deleteFile(`${result.path}`).then(response => {
          if (response && response.code && response.code === 200) {
            // notification.success('删除文件成功');

            Promise.resolve(true);
          } else {
            // notification.error('删除文件失败');
            Promise.resolve(false);
          }
        });
      } else {
      }
      return Promise.resolve(false);
    },
// 上传之前 限制大小 限制格式 ，可以返回boolean，可以返回promise
// return false 取消上传，还得重置fileDataList
    beforeUpload: file => {
      // 不能超过10M excel不能超过200行
      const isLt2M = file.size / 1024 / 1024 < 10;

      if (fileDataList.length === 0) {
        if (!isLt2M) {
          notification.warn('上传文件不能大于10MB');
          setFileList([...fileDataList]);
          return false;
        } else {
          return new Promise((resolve, reject) => {
            let isLimit = true;
            var reader = new FileReader();
            reader.onload = function(e) {
              var data = e.target.result;

              var workbook = XLSX.read(data, { type: 'binary' });
              var first_worksheet = workbook.Sheets[workbook.SheetNames[0]];
// 将excel转换成数组，判断data.length 就可以限制excel的行数
              var data = XLSX.utils.sheet_to_json(first_worksheet, {
                header: 1,
              });

              if (data && data.length > 200) {
                notification.warn('excel不能超过200行');
                setFileList([...fileDataList]);
                reject(false);
              } else {
                setFileList([...fileDataList, file]);
                resolve(file);
              }
            };
            reader.readAsBinaryString(file);
          });
        }
      } else {
        notification.warn('只能上传一个文件');
        setFileList([...fileDataList]);
        return false;
      }
    },
    onChange({ file, fileList }) {
      if (file.status === 'uploading') {
        setIsFileUpLoading(true);
      } else {
        setIsFileUpLoading(false);
      }
    },
// 文件列表
    fileList: fileDataList,
  };

 

使用

         <Upload {...uploadProps}>
             <Button>
                    <Icon type="upload" /> Upload
                  </Button>          
         </Upload>