react简易实现图片上传组件-从相机或文件夹上传

最新推荐文章于 2024-08-09 07:23:58 发布

取名好樊

最新推荐文章于 2024-08-09 07:23:58 发布

阅读量5.3k

点赞数 5

分类专栏： React 文章标签：图片上传打开相机上传

本文链接：https://blog.csdn.net/qq_31290307/article/details/87868700

版权

本文介绍了如何在React中创建一个简单的图片上传组件，支持从相机或文件夹选择图片。利用input标签的capture属性实现相机上传，通过设置multiple属性支持多选文件，并实现了预加载图片的功能。

摘要由CSDN通过智能技术生成

简单做了个图片上传的组件；

 <div className={styles.uploadImg_main}>
        <input
          style={
  {
            display:'none'
          }}
          ref={(el) => { this.input = el }}
          type='file'
          accept='image/*'
          onChange={this.handleImageChange}
        />
        <div onClick={this.addImage}>
          {
            this.state.imgUrl&&<img className={styles.show_img} src={this.state.imgUrl} />
          }
          <div className={styles.montmorillonite_text}>{this.props.msg}</div>
          <div className={styles.montmorillonite}>
            <div className={styles.montmorillonite_add} >+
            </div>
          </div>
        </div>
      </div>

该功能主要通过 input标签实现：