react中input标签上传图片并实现预览的方法

GTR1998

于 2020-11-10 08:57:22 发布

阅读量2.1k

点赞数 2

本文链接：https://blog.youkuaiyun.com/Boring_com/article/details/109591546

版权

本文介绍在React应用中如何通过input标签上传图片，并实现图片的实时预览功能。主要涉及两种方法：一是利用id选择器操作DOM元素，二是利用ref属性直接获取DOM节点进行操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

利用id来操作dom

//input中 使用accept来接收图片的类型
<input type="file" id="file" accept="image/*" onChange={
    this.handlerChange.bind(this) }/>
<img src={
    this.state.img } alt="" style={
   {
    width: '500px'}}/>

//在定义的函数中取出
handlerChange () {
   
    const that =

最低0.47元/天解锁文章