一、React 上传图片

1. 导入ImagePicker组件

import { ImagePicker } from 'antd-mobile'

export default class RentAdd extends Component {
  constructor(props) {
    super(props)

    this.state = {
      // 临时图片地址
      tempSlides: [],
    }
  }
  
  /* 
    1 给 ImagePicker 组件添加 onChange 配置项。
    2 通过 onChange 的参数，获取到上传的图片，并存储到状态 tempSlides 中。
  */
  handleHouseImg = (files, type, index) => {
    console.log(files, type, index)
    this.setState({
      tempSlides: files
    })
  }
  
   submitHandle = async () => {
    const { tempSlides } = this.state

    if (tempSlides.length > 0) {
      // 已经有上传的图片了
      const form = new FormData() 
      
      tempSlides.forEach(item => form.append('file', item.file))
      const res = await API.post('/houses/image', form, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      })
    }

    console.log(houseImg)
  }

  render() {
    const {
      tempSlides,
    } = this.state

    return (
      <div>
          <ImagePicker
            onChange={this.handleHouseImg}
            files={tempSlides}
            multiple={true}
          />
      </div>
    )
  }
}