antd组建——上传图片

0. 用到的关键包

import ImgCrop from 'antd-img-crop';

1. 文件上传的相关方法

const beforeUpload = (file) => {
                const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
                if (!isJpgOrPng) {
                        message.warn('头像必须是JPG/PNG格式');
                }
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isLt2M) {
                        message.warn('上传的头像图片必须小于2MB');
                }
                return isJpgOrPng && isLt2M;
        }

        const changeLogo = (e: { code: number; message: string; data: any[]; }) => {
                if (e.code !== 200) {
                        // message.error('上传logo失败！');
                        console.log(`产品配置管理上传logo失败：${e.message}`);
                } else {
                        const params = {
                                objectField: {
                                        logo: e.data[0],
                                },
                                entpName: props.departmentList[0].entpName,
                                entpCode: props.departmentList[0].entpCode,
                        };
                        // 将上传到服务器返回的地址 通过调用后端接口 保存在数据库中
                        dispatch({
                                type: 'entpMember/editAmoeba',
                                payload: params,
                                callback: (result: any) => {
                                        debugger;
                                        console.log(result);
                                        if (result.code === 200) {
                                                message.success(result.message);
                                        }
                                },
                        })
                }
        }

        const getExtraData = (file) => {
                // 产品端 团队 上传文件到服务器的相关参数
                return {
                        fileDirPath: '/logo/',
                        registrationCode: 'entp-img',
                };
        };

2. 文件上传用到的组件以及上传方法的使用

<ImgCrop>
  <Upload
           name="file"
           listType="picture"
           className="avatar-uploader"
           showUploadList={false}
           action="/api/file/upload"
           beforeUpload={beforeUpload}
           data={getExtraData}
           onSuccess={(e: any) => changeLogo(e)}
           >
       		{props.departmentList ? (
       			JSON.parse(props.departmentList[0].extendFieldObject).logo ? (                                              											  			
               		 <img className={styles.image} 
                     	src={getPhotoUrl(JSON.parse(props.departmentList[0].extendFieldObject).logo)}/>) : 
                     	(<div style={{ backgroundColor: color }} className={styles.imgDiv}>{props.departmentList[0].entpName.substring(0, 1)}</div>)
             	) : ''
             }
	</Upload>
</ImgCrop>