H5自定义样式上传图片

由于之前H5的业务中遇到上传图片的需求，但是对样式有一定的要求 类似于下图一样的效果，<input type=file /> 的样式大家也都清楚，要实现下图的效果，这边贴出了代码。

image.png

  /**
   * @name: avatorModalInit
   * @msg: 初始化头像模态框
   * @param {null}
   * @return:
   */
  avatorModalInit() {
    const { avatorModal } = this.state;
    return (
      <div className='avator'>
        <span className='text' onClick={this.chooseLocaleImg.bind(this)}>从手机相册选择</span>
        <input id='choosePhotoAlbum' type="file"  multiple accept="image/*" className='choosePhotoAlbum' onChange={this.uploadAvator.bind(this, 1)}  />
        <span className='text' onClick={this.takePhotos.bind(this)}>拍照</span>
        <input id='camera' type="file" accept="image/*" capture='camera' className='camera' onChange={this.uploadAvator.bind(this, 2)}  />
      </div>
    )
  }

  // 更改input点击事件到按钮上，同时设置css隐藏input
  chooseLocaleImg() {
    const chooseImg = document.getElementById('choosePhotoAlbum');
    chooseImg.click();
  }

  takePhotos() {
    const camera = document.getElementById('camera');
    camera.click();
  }

   /**
   * @name: uploadAvator
   * @msg: 上传头像
   * @param {type}
   * @return:
   */
  uploadAvator(type) {
    // type： 1 从相册选择 , 2 拍照
    const localFile = document.querySelector('#choosePhotoAlbum').files[0]; // 从手机相册选择
    const cameraFile = document.querySelector('#camera').files[0]; // 拍照
    let file;
    if(type === 1) {
      file = localFile; // 本地相册
    } else {
      file = cameraFile; // 拍照
    }
    const formdata = new window.FormData();
    formdata.append('member', file)
  }

主要思路： 隐藏input标签，然后在自定义的标签的点击事件中主动触发input的点击事件，这样就既实现了功能，也可以自定义样式。