ImageUploader 是否能够增加上传事件

[awmleer]

Discussed in https://github.com/ant-design/ant-design-mobile/discussions/5121

^{Originally posted by hugejile April 26, 2022} 我需要拦截点击上传按钮，某些情况下调用浙里办的拍照事件，目前是不是没有办法实现？

[miracles1919]

这个目前其实能通过自定义按钮实现，在官网的例子里给自定义按钮加个 zindex，覆盖 input

<div
  style={{
    // ...
    position: 'relative',
    zIndex: 5,
  }}
  onClick={() => console.log(11)}
>
  <PictureOutline style={{ fontSize: 32 }} />
</div>

[awmleer]

的确是，目前我们有些内部项目也是这么玩的，但是感觉有点挫 😅 成本也有点高

[hugejile]

我目前也用了这种方法，把disableUpload设置true，不过change事件不能自动触发，导致最大最小值等其他判断都失效了。

[awmleer]

其实回过头来想一下，这种情况下还何必用 ImageUploader 组件呢？直接自己写个 Image 组件列表 + 上传按钮 不就可以了么 🤔 硬要拦截 ImageUploader 的上传事件，感觉有点黑，意义也不太大……？

[hugejile]

现在一个应用写完，要支持浙里办、政务钉、网页版，区分来写挺麻烦的，最好有个拦截onclick事件，允许传入来自硬件设备的内容，例如base64的图片等。

[miracles1919]

允许传入来自硬件设备的内容，例如base64的图片等

不一定要拦截 onClick，可以通过更新 value 的方式。

const Upload: FC = () => {
  const [disableUpload, setDisableUpload] = useState(true)
  const [fileList, setFileList] = useState([])

  useEffect(() => {
    // 环境判断
    setDisableUpload(true)
  }, [])

  // 自定义点击
  const onUploadClick = () => {
    if (case 1) {
      // 硬件设备返回的 base64
      const url = ''
      setFileList(fileList => [...fileList, { url }])
    }
  }

  return (
    <ImageUploader
      value={fileList}
      onChange={setFileList}
      maxCount={2}
      upload={mockUpload}
      disableUpload={disableUpload}
    >
      {disableUpload && <div onClick={onUploadClick}> + </div>}
    </ImageUploader>
  )
}