如何使用React和Next上传照片？

npx create-next-app

import React, { useState } from 'react';

const UploadComponent = () => {
  const [selectedFile, setSelectedFile] = useState(null);

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

  const handleUpload = () => {
    if (selectedFile) {
      // 在这里处理上传逻辑，可以使用fetch或者axios等库发送POST请求将文件上传到服务器
    }
  };

  return (
    <div>
      <input type="file" onChange={handleFileChange} />
      <button onClick={handleUpload}>上传</button>
    </div>
  );
};

export default UploadComponent;

import UploadComponent from '../components/UploadComponent';

const UploadPage = () => {
  return (
    <div>
      <h1>上传照片</h1>
      <UploadComponent />
    </div>
  );
};

export default UploadPage;

export default function handler(req, res) {
  if (req.method === 'POST') {
    // 在这里处理文件上传逻辑，可以使用multer等库将文件保存到本地或者云存储服务
    res.status(200).json({ message: '上传成功' });
  } else {
    res.status(405).json({ message: '不允许的请求方法' });
  }
}

module.exports = {
  async rewrites() {
    return [
      {
        source: '/api/upload',
        destination: '/upload',
      },
    ];
  },
};

npm run dev