如何在react js中使用Hooks上传/浏览和显示网页上的图片？

import React, { useState, useEffect, useRef, useCallback } from 'react';

function ImageUploader() {
  // 状态管理
  const [selectedImage, setSelectedImage] = useState(null);
  const [previewImage, setPreviewImage] = useState(null);

  // 创建一个ref引用，用于input[type="file"]元素
  const fileInputRef = useRef(null);

  // 当选择图片时触发的回调函数
  const handleImageSelect = useCallback((e) => {
    const file = e.target.files[0];
    setSelectedImage(file);
    setPreviewImage(URL.createObjectURL(file));
  }, []);

  // 清除预览图片的回调函数
  const handleClearPreview = useCallback(() => {
    setSelectedImage(null);
    setPreviewImage(null);
    fileInputRef.current.value = null;
  }, []);

  // 监听selectedImage的变化，上传图片或执行其他操作
  useEffect(() => {
    if (selectedImage) {
      // 在这里执行上传图片的逻辑，可以调用后端API或使用第三方库
      console.log('上传图片:', selectedImage);
    }
  }, [selectedImage]);

  return (
    <div>
      <input
        type="file"
        accept="image/*"
        ref={fileInputRef}
        onChange={handleImageSelect}
      />
      {previewImage && (
        <div>
          <img src={previewImage} alt="预览图片" />
          <button onClick={handleClearPreview}>清除预览</button>
        </div>
      )}
    </div>
  );
}

export default ImageUploader;

import React from 'react';
import ImageUploader from './ImageUploader';

function App() {
  return (
    <div>
      <h1>图片上传示例</h1>
      <ImageUploader />
    </div>
  );
}

export default App;