自定义上传图片功能（限制图片大小以及类型）

思路：
隐藏input按钮（因为input的样式丑丑滴），在把自己写的样式定位到input按钮上，点击调用input的上传功能即可
注意：
重置input的value值，防止出现上传同名文件第2次无效的问题

html部分

 
  <input
                    style={{ display: "none" }}//隐藏input按钮
                    type="file"
                    accept="image/png"//只接收png形式的图片
                    onChange={this.inputChange}
                    ref={this.hiddenFileInputRef}
                  />
                  {image ? (//图片上传成功展示图片，否则展示upload样式
                    <img
                      onClick={this.pickImageHandler}
                      src={`${image}`}
                    ></img>
                  ) : (
                    <div
                      onClick={this.selecteFileHandler}
                      className={styles.uploadBtn}
                    >
                      <Icon type={"plus"} style={{ fontSize: 30 }} />
                      <div>Upload</div>
                    </div>
                  )}

js部分代码

hiddenFileInputRef = createRef(null);//拿到input的ref

 inputChange = (e) => {
    let reader = new FileReader();//读取文件内容
    reader.onload = ((file) => {//文件读取成功时触发
      const isPng = file.type === "image/png";
      if (!isPng) {
        message.error("文件格式为PNG");
      }
      const isLt2kb = file.size / 1024 / 1024 < 0.02;//限制图片不超过20kb
      if (!isLt2kb) {
        message.error("文件大小不超过20KB");
      }
      if (isPng && isLt2kb) {
        return (e) => {
          image = e.target.result;
        };
      }
    })(e.target.files[0]);
    reader.readAsDataURL(e.target.files[0]);//将读取到的文件编码成DataURL ，可以将资料(例如图片、excel文件)内嵌在网页之中，不用放到外部文件
    e.target.value = "";//防止出现上传同名文件第2次无效的问题，此时就需要重置input的值 
  };
  selecteFileHandler = (e) => {
    this.hiddenFileInputRef.current.click();//调用input方法
  };
  pickImageHandler = () => {
    this.hiddenFileInputRef.current.click();//调用input方法
  };