2018-03-07upoad file

{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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 136,188评论 19 139
  • React中没有类似Angular那样的双向数据绑定,在做一些表单复杂的后台类页面时,监听、赋值、传递、校验时编码...
    tedyuen777阅读 13,311评论 1 23
  • simplify the life HTML5 File API — 让前端操作文件变的可能 前言 在 HTML5...
    我是强强阅读 8,868评论 0 1
  • 题记:生活简单就迷人,人心简单就幸福。学会了简单,那就不简单! 近一段时间,感觉参加葬礼的次数超过了参...
    月新阅读 3,122评论 1 3
  • 我的胡萝卜, 等了你整整一个春天。 不信,你吸吸鼻子, 肯定能闻到春天的花香。 雪人, 我的大扫帚, 等了你整整一...
    毛小驴613阅读 1,657评论 0 0

友情链接更多精彩内容