如何使用formdata发送图片文件到React/Next js api？

<form onSubmit={handleSubmit}>
  <input type="file" onChange={handleFileChange} />
  <button type="submit">上传图片</button>
</form>

const handleFileChange = (event) => {
  const file = event.target.files[0];
  setFile(file);
};

const handleSubmit = (event) => {
  event.preventDefault();

  const formData = new FormData();
  formData.append('image', file); // 'image'是API接收图片的字段名

  // 发送请求并处理响应
  fetch('/api/upload', {
    method: 'POST',
    body: formData
  })
    .then((response) => response.json())
    .then((data) => {
      // 处理上传成功后的逻辑
    })
    .catch((error) => {
      // 处理上传失败后的逻辑
    });
};

import multer from 'multer';

const upload = multer({ dest: 'uploads/' }); // 指定上传文件保存的目录

export default function handler(req, res) {
  upload.single('image')(req, res, (error) => {
    if (error) {
      // 处理上传失败后的逻辑
      return res.status(500).json({ error: '文件上传失败' });
    }

    // 处理上传成功后的逻辑，可以在这里保存文件路径或其他相关信息
    return res.status(200).json({ message: '文件上传成功' });
  });
}