AntdPro上传文件之Antd各个版本的对比

原创

已于 2022-04-19 16:38:14 修改 · 2.8k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #react.js

于 2022-04-15 15:49:16 首次发布

本文回顾了作者在不同版本的antd中上传图片和文件的方法，包括处理自动旋转、base64转换，以及在antdPro中简化文件上传流程。

文章目录

一、antd3上传图片
二、antd4上传文件
三、使用antdPro

之前一直在使用antd上传文件，图片，从antd3到antd4再到antdPro，总结一下经验吧

一、antd3上传图片

这里用的antd的版本是"antd": "^3.25.0",

import React, {
   
    FC, forwardRef, useState, memo } from 'react';
import {
   
    Button, Icon, Upload as AntdUpload, Spin } from 'antd';
import {
   
    UploadChangeParam } from 'antd/lib/upload';
import {
   
    UploadFile } from 'antd/lib/upload/interface';
import {
   
    getBase64Rotatatin } from 'utils';
import {
   
    detectImageAutomaticRotation } from 'utils/rotatain';
import styles from './uploadImg.module.scss';
import classNames from 'classnames';
interface Props {
   
   
  onChange?(base64: string): void;
  value?: string;
  size?: 'small' | 'default';
}
//获取base64
// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
function getBase64(img: any, callback: any) {
   
   
  const reader = new FileReader();
  reader.addEventListener('load', () => callback(reader.result));
  reader.readAsDataURL(img);
}
const UploadImage: FC<Props> = ({
   
    onChange, value, size = 'default' }, ref): JSX.Element => {
   
   
  const [loading, setLoading] = useState(false);
  const uploadProps = {
   
   
    accept: 'image/*', //设置接收的文件时图片
    beforeUpload(): boolean {
   
   
      setLoading(true); //设置loading状态
      return false;
    },
    async onChange(info: UploadChangeParam<UploadFile<any>>): Promise<void> {
   
   
      if (!info.file) return Promise.reject(new Error('请选择图片'));
      try {
   
   
      //这个是我写的函数，判断系统是否自带回正
        const system = await detectImageAutomaticRotation();
        if (system) {
   
   
          getBase64(info.file, async (imgUrl: any) => {
   
   
            if (onChange) {
   
   
              onChange(imgUrl as string);
            }
          });
        } else {
   
   
        //回正函数
          const result = await getBase64Rotatatin(info.file);
          if (onChange) {
   
   
            onChange(result as string);
          }
        }
      } catch (e) {
   
   
        console.error(e);
      } finally {
   
   
        setLoading(false);
      }
    },
    onRemove(): boolean {
   
   
      if (onChange) {
   
   
        onChange('');
      }
      return true;
    },
  };
  const uploadButton = (
    <div className={
   
   styles['upload-img__btn']}>
      <Icon type={
   
   'camera'} className={
   
   styles['upload-img__icon']}

最低0.47元/天解锁文章