antd的手动上传组件的再次封装

最新推荐文章于 2024-07-05 10:24:47 发布

置顶

谢大古

最新推荐文章于 2024-07-05 10:24:47 发布

阅读量562

点赞数 1

分类专栏： antd react 文章标签： javascript reactjs 前端

本文链接：https://blog.csdn.net/weixin_37895831/article/details/115353251

版权

本文介绍了在ReactJS中如何对antd的手动上传组件进行二次封装，详细讲解了基本实现效果以及封装过程，包括ManualUpload.js组件代码和ManualUpload.css样式文件的编写，并提供了组件的调用方法。

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

1.基本实现效果

2.代码：

1）ManualUpload.js

import { useState } from 'react';
import {
    Upload,
    Button,
    message,
    Row,
    Image,
    Col,
    Tooltip,
} from 'antd';
import {
    UploadOutlined,
    DeleteOutlined
} from '@ant-design/icons';
import './ManualUpLoad.css'
import { connect } from 'dva'
const ManualUpLoad = props => {
    const {
        style,
        ImageSrc,
        apiName,
    } = props;
    const [fileList, setFileList] = useState([]);
    const [uploading, setUpLoaidng] = useState(true);
    const [loading, setLoading] = useState(false);
    const [imgUrl, setImgUrl] = useState('')
    const onRemove = file => {
        setFileList(() => {
            const index = fileList.index