H5自定义样式上传图片

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

image.png

  /**
   * @name: avatorModalInit
   * @msg: 初始化头像模态框
   * @param {null}
   * @return:
   */
  avatorModalInit() {
    const { avatorModal } = this.state;
    return (
      

        从手机相册选择
        
        拍照
        
      
    )
  }

  // 更改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的点击事件，这样就既实现了功能，也可以自定义样式。