{editing ? (
  <input 
    type="file"
    accept=".jpg, .jpeg, .png" 
    onChange={(e: any) => this.handleImageChange(e)} />
) : null}

原生輸入框改變事件 ，采用異步方式.。
URL.createObjectURL把圖片轉(zhuǎn)成base64位編碼格式展示。
通過(guò)this.props.onChange(file)調(diào)用上傳方法。

 async handleImageChange(e: any) {
   const url = URL.createObjectURL(e.target.files[0])
   const file = e.target.files[0]
   await this.props.onChange(file)
   this.setState({ url })
 }  

redux部分

export default connect<{}, StateProps>(
  Overview,
  { styles },
  {
    mapModelToProps(customer, { storeId, customerId }, editing) {
      return {
        customer,
        storeId,
        customerId,
        editing,
      }
    },
    mapChangeToProps: {
      onChange: handler => (values: any) => handler(values, "avatar"),
    },
  },
)   

屏幕快照 2018-03-07 11.54.52.png

屏幕快照 2018-03-07 11.55.02.png

添加折扣的接口請(qǐng)求和頁(yè)面：

1.png

2.png

3.png

4.png

5.png