如果输入的类型为“file”，如何在 React 中的输入元素上获得验证错误答案

【问题标题】：How to get validation error on input element in React if the input is of type="file"如果输入的类型为“file”，如何在 React 中的输入元素上获得验证错误
【发布时间】：2021-07-17 15:18:30
【问题描述】：

我正在使用材质 ui 并用图标覆盖输入组件，但由于我隐藏了一个输入元素，因此我没有收到任何验证错误。我正在使用 useForm 进行验证

<IconButton variant="contained" component="label">
  <AddCircleOutlineIcon fontSize="large" />
  <input
    {...register("image", { required: true })}
    required
    type="file"
    accept=".jpg,.png,.jpeg"
    onChange={(e) => setFile(e.target.files[0])}
    hidden
  />
</IconButton>

【问题讨论】：

标签： javascript reactjs mongodb express

【解决方案1】：

您必须使用验证功能来验证所需的文件扩展名是否仍然有效。

const Upload = () => {
  let [file, setFile] = useState(null);
  /**
   * Create a new state variable to hold the name of the
   * file. This is needed since the browser does not retain
   * the filename by default when uploading. 
   */
  let [filename, setFilename] = useState('');

  const filterBySize = (file) => {
    //filter out files larger than 5MB
    return file.size < 5242880;
  };

  const fileChangedHandler = event => {
    let file = event.target.files[0];
    let reader = new FileReader();
    /**Capture filename */
    setFilename(file.name);
    console.log(file);
    reader.onload = function(e) {

      setFile(e.target.result);
    };
    reader.readAsDataURL(event.target.files[0]);

    if (file != ".png" || file !=".jpg" ) {
      window.alert("File does not support. You must use .png or .jpg ");
      return false;
   }
   if (file.size > e6) {
     window.alert("Please upload a file smaller than 1 MB");
     return false;
   }
   
  };
return(
  <input className="btn btn-secondary" 
                  id="fileInput" 
                  type="file" 
                  accept="image/*"
                  // inputProps={{ accept: 'image/*' }}
                  // fileFilter={filterBySize}
                  onChange={fileChangedHandler} 
                />

参考：https://github.com/react-hook-form/react-hook-form/discussions/1946

【讨论】：