如何对react js中图像字段执行验证请求

import React, { useState } from 'react';

function ImageUpload() {
  const [file, setFile] = useState(null);
  const [error, setError] = useState('');

  const handleFileChange = (event) => {
    const selectedFile = event.target.files[0];
    if (selectedFile) {
      setFile(selectedFile);
      setError('');
    }
  };

  return (
    <div>
      <input type="file" onChange={handleFileChange} />
      {error && <p style={{ color: 'red' }}>{error}</p>}
    </div>
  );
}

export default ImageUpload;

const handleFileChange = (event) => {
  const selectedFile = event.target.files[0];
  if (selectedFile) {
    if (selectedFile.size > 5 * 1024 * 1024) { // 限制文件大小为5MB
      setError('文件大小不能超过5MB');
      setFile(null);
    } else if (!['image/jpeg', 'image/png'].includes(selectedFile.type)) { // 限制文件类型
      setError('只允许上传JPEG或PNG格式的图片');
      setFile(null);
    } else {
      setFile(selectedFile);
      setError('');
    }
  }
};

import axios from 'axios';

const handleSubmit = async (event) => {
  event.preventDefault();
  if (file) {
    const formData = new FormData();
    formData.append('image', file);

    try {
      const response = await axios.post('/api/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      });
      console.log('上传成功:', response.data);
    } catch (err) {
      setError('上传失败，请重试');
    }
  }
};

import React, { useState } from 'react';
import axios from 'axios';

function ImageUpload() {
  const [file, setFile] = useState(null);
  const [error, setError] = useState('');

  const handleFileChange = (event) => {
    const selectedFile = event.target.files[0];
    if (selectedFile) {
      if (selectedFile.size > 5 * 1024 * 1024) {
        setError('文件大小不能超过5MB');
        setFile(null);
      } else if (!['image/jpeg', 'image/png'].includes(selectedFile.type)) {
        setError('只允许上传JPEG或PNG格式的图片');
        setFile(null);
      } else {
        setFile(selectedFile);
        setError('');
      }
    }
  };

  const handleSubmit = async (event) => {
    event.preventDefault();
    if (file) {
      const formData = new FormData();
      formData.append('image', file);

      try {
        const response = await axios.post('/api/upload', formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        });
        console.log('上传成功:', response.data);
      } catch (err) {
        setError('上传失败，请重试');
      }
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="file" onChange={handleFileChange} />
      {error && <p style={{ color: 'red' }}>{error}</p>}
      <button type="submit">上传</button>
    </form>
  );
}

export default ImageUpload;