{editing ? (
<input
type="file"
accept=".jpg, .jpeg, .png"
onChange={(e: any) => 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-07 11.54.52.png
屏幕快照 2018-03-07 11.55.02.png
添加折扣的接口请求和页面：
1.png
2.png
3.png
4.png
5.png
