使用 React 进行照片上传验证

Question

我有这个小问题我正在使用 Ant Design 及其组件 https://ant.design/components/upload/

我正在尝试上传图片，一切正常，但我需要添加验证以验证文件是否正确。也就是说，如果用户将任何其他文件重命名为 .jpg 或 .png 扩展名，我需要对其进行验证并向他们显示警报。

我怎样才能做到这一点，目前我们使用 FileReader

以 base64 格式转换图像

Answer 1

您可以创建一个函数和 return 类似的东西。

const verifyImage = (img) => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.addEventListener('load', event => {
      let picFile = event.target
      let imgNew = new Image()
  imgNew.addEventListener('load', () => {
    resolve(reader.result)
  })
  imgNew.addEventListener('error', () => {
    reject()
  })
  imgNew.src = picFile.result
})
reader.readAsDataURL(img)
  })
}

使用 React 进行照片上传验证

Photo Upload Validation with React

validation

upload

image

reactjs

antd