2018-03-07upoad file

{editing ? (
   this.handleImageChange(e)} />
) : null}

原生输入框改变事件 ,采用异步方式.。
URL.createObjectURL把图片转成base64位编码格式展示。
通过this.props.onChange(file)调用上传方法。

 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-07upoad file_第1张图片
屏幕快照 2018-03-07 11.54.52.png
2018-03-07upoad file_第2张图片
屏幕快照 2018-03-07 11.55.02.png

添加折扣的接口请求和页面:


2018-03-07upoad file_第3张图片
1.png
2018-03-07upoad file_第4张图片
2.png
2018-03-07upoad file_第5张图片
3.png
2018-03-07upoad file_第6张图片
4.png
2018-03-07upoad file_第7张图片
5.png

你可能感兴趣的:(2018-03-07upoad file)