pc-channel/src/pages/eContract/seal/components/AddSeal.jsx

import React, { PureComponent, useState, useEffect } from 'react'
import { Modal, Row, Col, Table, Pagination, Button, Form, Input,message, Icon, notification } from 'antd'
import ImageUpload from './ImageUpload';
import apis from '../../../../services/apis';
import router from 'umi/router';
import request from '../../../../utils/request';

const AddSeal = props => {
  const companyId = props.companyId
  function close(e){
    props.onCancel(e)
  }

  function handleSubmit (e) {
    e.preventDefault();
    props.form.validateFields((err, values) => {
      if (!err){
        request({ ...apis.seal.addSeal, data: { ...values, companyId: companyId },}).then((data) => {
          message.info("保存成功")
          props.onSuccess({visable:false, companyId: companyId});
        }).catch((err) => {
          message.info(err.msg || err.message)
        })
      }
    });
  }

  function openNotificationWithIcon(type, message) {
    notification[type]({
      message,
      description:
        '',
    });
  }

  function checkImageWH(file, width, height) {
    let self = this;
    return new Promise(function (resolve, reject) {
        let filereader = new FileReader();
        filereader.onload = e => {
            let src = e.target.result;
            const image = new Image();
            image.onload = function () {
                if (width && this.width != width && height && this.height != height) {
                    message.error('图片尺寸不符合要求')
                    reject();
                } else {
                    resolve();
                }
            };
            image.onerror = reject;
            image.src = src;
        };
        filereader.readAsDataURL(file);
    });
}

  const handleBeforeUpload = (file) => {
    //限制图片 格式、分辨率
    const isPNG = file.type === 'image/png';
    if (! isPNG){
        message.error('请上传PNG格式图片')
    }
    return (isPNG ) && checkImageWH(file, 166, 166);
  }  

  const { getFieldDecorator } = props.form

  return (
    <Modal footer={null} title="新增印章" visible={props.visible} onCancel={() => close({visable:false})} width={800}>
      <Form labelCol={{ span: 7 }} wrapperCol={{ span: 12 }} onSubmit={handleSubmit}>
        <Form.Item label="印章名称">
            {getFieldDecorator('sealName',{
            rules: [
                {
                required: true,
                message: '请填写印章名称',
                },
            ],
            })(<Input maxLength={10}/>)}
        </Form.Item>
        <Form.Item label="印章图" help="166*166 像素，PNG格式透明底 ">
            {getFieldDecorator('sealImg', {
              rules: [{ required: true, message: '请选择印章图' }],
            })(
              <ImageUpload beforeUpload={handleBeforeUpload} />,
            )}
          </Form.Item>
        <Form.Item style={{ width: '400px', margin: 'auto', display: 'flex', justifyContent: 'space-between' }}>
            <Button type="primary" htmlType="submit">确定</Button>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <Button onClick={() => close({visable:false})}>取消</Button>
         </Form.Item>
      </Form>
    </Modal>
  );
}

const WrappedBase = Form.create({ name: 'AddSeal' })(AddSeal);

export default WrappedBase