react 函数组件 图片上传

要在 React 函数组件中实现图片上传，你可以使用 HTML5 中的 `<input type="file" />` 元素，然后在组件中监听文件选择事件，将选择的文件上传到服务器。

以下是一个简单的示例代码：

import React, { useState } from 'react';

function ImageUpload() {
  const [selectedFile, setSelectedFile] = useState(null);

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

  const handleUploadClick = () => {
    const formData = new FormData();
    formData.append('image', selectedFile);

    // 在这里将 formData 发送到服务器进行上传
  };

  return (
    <div>
      <input type="file" onChange={handleFileInputChange} />
      <button onClick={handleUploadClick}>上传图片</button>
    </div>
  );
}

export default ImageUpload;

在这个示例中，我们使用 `useState` 钩子来跟踪用户选择的文件。当用户选择一个文件时，`onChange` 处理程序将更新 `selectedFile` 状态。然后，用户可以单击“上传图片”按钮将选择的文件上传到服务器。

在实际应用中，你需要将上传逻辑替换为你自己的上传代码。你可能需要使用 Axios、Fetch 或其他 HTTP 库来发送 FormData 到服务器。