图片上传图片上传图片上传图片上传图片上传图片上传图片上传图片上传图片上传图片上传图片上传图片上传图片上传图片上传

import React, { Component } from 'react'
import { Upload, Button, Icon, message } from 'antd'
import {httpConfig} from "../../config/index"
import {sessionStorage,localStorage} from '../../utils/storage'
export default class SingleImgUpload extends Component {
  state = {
    img: '',
  }
  onChange = (e) => {
    let _temp = e.fileList.find(value => value.name === e.file.name) || {}
    if (_temp.status === 'done') {
      let _url = _temp.response.respParams.url
      this.setState({
        img: _url,
      })
      this.props.onChange(_url)
    }
  }
  componentDidMount() {}
  handleBeforeUploadByWidth = (file) => {
    const {width,height} = this.props
    return new Promise((resolve, reject) => {
      this.checkImageWH(file, width, height).then(res => {
        const base = 1024
        if(res){
          if(file.size > base *base* 0.8) {
            message.error('您上传的图片应小于800k')
            reject(false)
          }else{
            resolve(true)
          }
        }else{
          reject(false)
        }
      }).catch(err => {
        if (err === false) {
          reject(false)
        }
      })
    })
  }
  //checkImageWH  返回一个promise  检测通过返回resolve  失败返回reject阻止图片上传
  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) {
            message.error('请上传宽为' + width + '像素的图片')
            reject(false);
          } else if (height && this.height != height) {
            message.error('请上传高为' + height + '像素的图片')
            reject(false);
          } else {
            resolve(true);
          }
        };
        image.onerror = reject;
        image.src = src;
      };
      filereader.readAsDataURL(file);
    });
  }

  getcookie(objname) {//获取指定名称的cookie的值
    var arrstr = document.cookie.split("; ");
    for (var i = 0; i < arrstr.length; i++) {
        var temp = arrstr[i].split("=");
        if (temp[0] == objname) return unescape(temp[1]);
    }
  }
  render() {
    const session = sessionStorage.get("localSession")
    const cookie = this.getcookie("xxl_sso_sessionid")
    const uploadProps = {
      name: 'file',
      action: httpConfig.queryBaseURL+`/store/upload?sessionId=${session||cookie}`,
      accept: '.jpeg,.jpg,.png,.gif',

      onChange: this.uploadChange,
      beforeUpload: this.beforeUpload,
    }
    const { img } = this.state
    const { width,height,value } = this.props
    return (
      <Upload
        disabled={this.props.disabled}
        {...uploadProps}
        onChange={this.onChange}
        showUploadList={false}
        beforeUpload={this.handleBeforeUploadByWidth}
      >
         {img || value ? (
          < img src={img || value} width='100' />
        ) : (
          <Button type="dashed" style={{width: '100px',
            height: '100px',background:'rgb(246,247,249)'}}>
            <div className="table-action">点击上传</div>
          </Button>
        )}
        <div style={{color:'#999999',fontSize:12,marginTop:10}}>
          <p>支持jpg,png,jpeg格式; 尺寸：{width}*{height}; 建议200k以内，最大不超过800k;  </p>
        </div>
      </Upload>
    )
  }
}