React实现Base64格式图片上传预览、取消及数据库读写示例

以下是符合需求的ProductUpload函数组件代码，包含图片预览、Base64上传、取消清除和数据库读取展示的全部功能：

import { useState, useEffect } from 'react';

const ProductUpload = () => {
  // 存储选中的图片Base64（用于预览）
  const [selectedImage, setSelectedImage] = useState(null);
  // 存储从数据库读取的图片列表
  const [savedImages, setSavedImages] = useState([]);

  // 组件挂载时读取已存储的Base64图片
  useEffect(() => {
    fetchSavedImages();
  }, []);

  // 处理文件选择，生成预览用的Base64
  const handleFileChange = (e) => {
    const file = e.target.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onloadend = () => {
        setSelectedImage(reader.result);
      };
      reader.readAsDataURL(file);
    }
  };

  // 将Base64图片存入数据库（模拟后端请求）
  const uploadToDatabase = async () => {
    if (!selectedImage) return;
    
    try {
      // 实际项目替换为你的后端API地址
      const response = await fetch('/api/upload-image', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ imageBase64: selectedImage }),
      });
      if (response.ok) {
        alert('图片上传成功');
        fetchSavedImages();
        setSelectedImage(null);
      }
    } catch (error) {
      console.error('上传失败:', error);
      alert('图片上传失败，请重试');
    }
  };

  // 从数据库读取Base64图片（模拟后端请求）
  const fetchSavedImages = async () => {
    try {
      // 实际项目替换为你的后端API地址
      const response = await fetch('/api/get-images');
      const data = await response.json();
      setSavedImages(data.images);
    } catch (error) {
      console.error('读取图片失败:', error);
    }
  };

  // 清除已选中的图片
  const handleCancel = () => {
    setSelectedImage(null);
    document.getElementById('image-upload').value = '';
  };

  return (
    <div style={{ maxWidth: '800px', margin: '20px auto' }}>
      <h2>产品图片上传</h2>
      
      {/* 文件选择区域 */}
      <div style={{ marginBottom: '20px' }}>
        <input
          type="file"
          id="image-upload"
          accept="image/*"
          onChange={handleFileChange}
          style={{ marginRight: '10px' }}
        />
        {selectedImage && (
          <div style={{ display: 'flex', gap: '10px', marginTop: '10px' }}>
            <button onClick={uploadToDatabase} style={{ padding: '8px 16px' }}>
              上传图片
            </button>
            <button onClick={handleCancel} style={{ padding: '8px 16px' }}>
              取消
            </button>
          </div>
        )}
      </div>

      {/* 固定尺寸预览区域 */}
      {selectedImage && (
        <div style={{ marginBottom: '30px' }}>
          <h3>预览图片</h3>
          <img
            src={selectedImage}
            alt="预览"
            style={{ width: '300px', height: '200px', objectFit: 'cover', border: '1px solid #ddd' }}
          />
        </div>
      )}

      {/* 已存储图片展示 */}
      <div>
        <h3>已上传图片</h3>
        {savedImages.length === 0 ? (
          <p>暂无已上传图片</p>
        ) : (
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))', gap: '15px' }}>
            {savedImages.map((img, index) => (
              <img
                key={index}
                src={img}
                alt={`已上传 ${index+1}`}
                style={{ width: '100%', height: '150px', objectFit: 'cover', border: '1px solid #ddd' }}
              />
            ))}
          </div>
        )}
      </div>
    </div>
  );
};

export default ProductUpload;

关键功能说明： #

• 图片预览：通过FileReader将本地文件转为Base64，存入状态后用固定300x200尺寸展示。
• Base64上传：点击上传按钮时，将Base64数据通过POST请求发送到后端，由后端存入数据库。
• 取消清除：重置选中图片状态并清空文件输入框，移除预览内容。
• 数据库读取：组件挂载时请求后端接口获取已存储的Base64图片列表，以网格形式展示。

注意事项： #

1. 需将示例中的/api/upload-image和/api/get-images替换为实际后端接口地址，后端要实现Base64存储、列表返回的逻辑。
2. Base64格式图片体积比原文件大30%左右，大图片建议先压缩再上传。
3. 可根据需求调整预览图、展示图的尺寸和样式。

内容的提问来源于stack exchange，提问作者NewPartizal