React.js中如何将图片上传至数据库并实现展示？求助

基础图片选择与本地预览 #

以下是最简实现，包含文件选择、本地预览功能：

import { useState, useEffect } from 'react';

function ImageUploader() {
  const [selectedFile, setSelectedFile] = useState(null);
  const [previewUrl, setPreviewUrl] = useState(null);

  // 处理文件选择
  const handleFileChange = (e) => {
    const file = e.target.files[0];
    if (file) {
      setSelectedFile(file);
      // 生成本地预览URL
      const preview = URL.createObjectURL(file);
      setPreviewUrl(preview);
    }
  };

  // 组件卸载时释放URL资源，避免内存泄漏
  useEffect(() => {
    return () => {
      previewUrl && URL.revokeObjectURL(previewUrl);
    };
  }, [previewUrl]);

  return (
    <div>
      <input
        type="file"
        accept="image/*" // 限制仅选择图片文件
        onChange={handleFileChange}
      />
      {/* 渲染预览图 */}
      {previewUrl && (
        <div style={{ marginTop: '16px' }}>
          <h3>预览</h3>
          <img 
            src={previewUrl} 
            alt="选中图片预览" 
            style={{ maxWidth: '300px', maxHeight: '300px' }} 
          />
        </div>
      )}
    </div>
  );
}

export default ImageUploader;

关键细节：

• accept="image/*" 过滤非图片文件，减少无效选择
• URL.createObjectURL 生成本地临时链接，无需上传即可预览
• 用useEffect清理临时URL，避免浏览器内存占用过高

上传图片到后端 #

如果需要将图片提交到服务器，可结合FormData和fetch实现：

// 新增上传处理函数
const handleUpload = async () => {
  if (!selectedFile) return;

  const formData = new FormData();
  formData.append('image', selectedFile); // 'image'为后端接收的字段名

  try {
    const res = await fetch('/api/upload', {
      method: 'POST',
      body: formData,
      // 无需手动设置Content-Type，浏览器会自动添加正确的multipart/form-data头
    });

    if (res.ok) {
      const data = await res.json();
      console.log('上传成功，返回数据:', data);
      // 可在此保存后端返回的图片地址到状态，用于后续展示
    } else {
      throw new Error('上传请求失败');
    }
  } catch (err) {
    console.error('上传出错:', err);
  }
};

// 在JSX中添加上传按钮
<button onClick={handleUpload} disabled={!selectedFile}>
  上传图片
</button>

常见问题修复 #

1. 预览图不显示：

   • 检查是否在文件选择后正确更新previewUrl状态
   • 确认img标签的src属性绑定了previewUrl

2. 后端接收不到文件：

   • 确保使用FormData传递文件，不要手动设置Content-Type头
   • 后端需配置支持multipart/form-data类型的请求

3. 大图片预览/上传卡顿：
   可在预览前压缩图片，以下是基于Canvas的压缩工具函数：

const compressImage = (file, maxWidth = 800) => {
  return new Promise((resolve) => {
    const reader = new FileReader();
    reader.onload = (e) => {
      const img = new Image();
      img.src = e.target.result;
      img.onload = () => {
        const canvas = document.createElement('canvas');
        let width = img.width;
        let height = img.height;

        // 按比例缩小图片
        if (width > maxWidth) {
          height = (height * maxWidth) / width;
          width = maxWidth;
        }

        canvas.width = width;
        canvas.height = height;
        const ctx = canvas.getContext('2d');
        ctx.drawImage(img, 0, 0, width, height);

        // 生成压缩后的Blob文件
        canvas.toBlob((blob) => {
          resolve(new File([blob], file.name, { type: file.type }));
        }, file.type);
      };
    };
    reader.readAsDataURL(file);
  });
};

// 在handleFileChange中使用：
const handleFileChange = async (e) => {
  const file = e.target.files[0];
  if (file) {
    const compressedFile = await compressImage(file);
    setSelectedFile(compressedFile);
    setPreviewUrl(URL.createObjectURL(compressedFile));
  }
};

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