React-js实现图片上传预览并展示返回的二进制处理图片求助

核心实现逻辑 #

• 用useState管理上传文件、本地预览URL、处理后图片URL三个状态
• 本地预览通过URL.createObjectURL生成浏览器可识别的临时URL
• 上传时以multipart/form-data格式提交文件，接收响应时指定responseType: 'blob'，将二进制PNG转成Blob URL用于展示

完整组件代码 #

import { useState, useEffect } from 'react';

const ImageUploadProcessor = () => {
  const [uploadedFile, setUploadedFile] = useState(null);
  const [localPreviewUrl, setLocalPreviewUrl] = useState('');
  const [processedImageUrl, setProcessedImageUrl] = useState('');

  // 处理文件选择，生成本地预览
  const handleFileChange = (e) => {
    const file = e.target.files[0];
    if (!file || !file.type.startsWith('image/')) return;

    setUploadedFile(file);
    const previewUrl = URL.createObjectURL(file);
    setLocalPreviewUrl(previewUrl);
    setProcessedImageUrl('');
  };

  // 上传文件并处理API返回的二进制响应
  const handleUpload = async () => {
    if (!uploadedFile) return;

    const formData = new FormData();
    formData.append('image', uploadedFile);

    try {
      const response = await fetch('你的API接口地址', {
        method: 'POST',
        body: formData,
        responseType: 'blob' // 关键：指定响应为Blob类型
      });

      if (!response.ok) throw new Error('请求失败');

      const blob = await response.blob();
      const imageUrl = URL.createObjectURL(blob);
      setProcessedImageUrl(imageUrl);
    } catch (err) {
      console.error('处理出错:', err);
      alert('图片处理失败，请重试');
    }
  };

  // 组件卸载时清理临时URL，避免内存泄漏
  useEffect(() => {
    return () => {
      localPreviewUrl && URL.revokeObjectURL(localPreviewUrl);
      processedImageUrl && URL.revokeObjectURL(processedImageUrl);
    };
  }, [localPreviewUrl, processedImageUrl]);

  return (
    <div style={{ maxWidth: 800, margin: '0 auto', padding: '20px' }}>
      <div style={{ marginBottom: '30px' }}>
        <input
          type="file"
          accept="image/*"
          onChange={handleFileChange}
          style={{ marginBottom: '10px' }}
        />
        
        {localPreviewUrl && (
          <div style={{ border: '1px solid #eee', padding: '10px', borderRadius: '4px' }}>
            <h3 style={{ fontSize: '16px', marginBottom: '8px' }}>上传预览</h3>
            <img 
              src={localPreviewUrl} 
              alt="上传预览" 
              style={{ maxWidth: '100%', height: 'auto' }} 
            />
          </div>
        )}

        {uploadedFile && (
          <button 
            onClick={handleUpload}
            style={{ marginTop: '10px', padding: '8px 16px', cursor: 'pointer' }}
          >
            提交处理
          </button>
        )}
      </div>

      {processedImageUrl && (
        <div style={{ border: '1px solid #eee', padding: '10px', borderRadius: '4px' }}>
          <h3 style={{ fontSize: '16px', marginBottom: '8px' }}>处理后图片</h3>
          <img 
            src={processedImageUrl} 
            alt="处理后图片" 
            style={{ maxWidth: '100%', height: 'auto' }} 
          />
        </div>
      )}
    </div>
  );
};

export default ImageUploadProcessor;

关键细节说明 #

• 本地预览：URL.createObjectURL直接基于本地文件生成临时URL，无需上传即可实时预览
• 二进制响应处理：设置responseType: 'blob'是核心，确保Fetch将服务器返回的二进制PNG解析为Blob对象，再转成可用于<img>的URL
• 内存管理：组件卸载时调用URL.revokeObjectURL释放临时URL占用的内存，避免长期运行导致内存泄漏
• 表单格式：用FormData封装文件，自动适配multipart/form-data格式，兼容绝大多数后端文件上传接口

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