图片上传

import React from ‘react’
import { Button, Upload, message } from ‘antd’
import ‘./styles.less’

export default class Login extends React.PureComponent {
constructor (props) {
super(props)
this.state = {
img: ‘’, // 存 img
imgData: ‘’, // 存 img 的数据
}
this.reader = new FileReader()
this.reader2 = new FileReader()
}

onClick = () => {
this.file.click()
}

onChange = () => {
// 把图片读成 URL
this.reader.readAsDataURL(this.file.files[0])

// 把图片读取成 二进制
this.reader2.readAsBinaryString(this.file.files[0])

// 监听图片 URL 读取完成
this.reader.onload = evt => {
  this.setState({
    img: evt.target.result,
  })
}

// 监听图片 二进制 数据读取完成
this.reader2.onload = evt => {
  this.setState({
    imgData: evt.target.result
  })
  console.log(evt.target.result)
}

}

submit = () => {
// axios({
// url: ‘’,
// method: ‘post’,
// data: {
// file: evt.target.result
// }
// })
}

render() {
const { img } = this.state

return (
  <div className="pages-login">
    { img && <img src={img} /> }
    <input 
      type="file" 
      className="file" 
      ref={v => this.file = v}
      onChange={this.onChange}
    />

    <Button onClick={this.onClick}>上传图片</Button>
    <Button onClick={this.submit}>提交表单</Button>
  </div>
)

}