React中如何预览已选择的上传图片？

浏览器出于安全限制，不会暴露本地文件的真实路径，所以你拿到的File对象里没有直接可用的本地路径。要实现图片预览，我们可以通过URL.createObjectURL()方法将File对象转换为临时可访问URL，具体修改如下：

核心修改点 #

• 修正State初始值：将useState("")改为useState(null)，空字符串不是合法的Blob/File类型，会导致URL.createObjectURL报错。
• 添加预览渲染逻辑：选中文件后，渲染<img>标签并使用生成的临时URL作为src。
• 清理临时URL：用useEffect在组件卸载或文件更新时释放objectURL，避免内存泄漏。

修改后的完整代码 #

import React, { useState, useRef, useEffect } from 'react';
import styled from 'styled-components';

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

  const handleButtonClick = () => {
    fileInput.current?.click();
  };

  const handleChange = (e) => {
    const file = e.target.files[0];
    if (file) {
      setSelectedFile(file);
    }
  };

  // 生成预览URL并自动清理旧URL
  useEffect(() => {
    if (selectedFile) {
      const newPreviewUrl = URL.createObjectURL(selectedFile);
      setPreviewUrl(newPreviewUrl);
      
      // 组件卸载或文件更新时释放资源
      return () => {
        URL.revokeObjectURL(newPreviewUrl);
      };
    } else {
      setPreviewUrl(null);
    }
  }, [selectedFile]);

  return (
    <Modal>
      <div>
        <div>
          <div>
            <div>
              <input 
                type="file" 
                style={{ display: 'none' }}
                ref={fileInput}
                onChange={handleChange}
                accept="image/*" // 限制仅选择图片文件
                multiple={true}
              />
              <button 
                className='box9_2_3_3_2'
                onClick={handleButtonClick}
              >
                选择图片
              </button>
              {/* 预览图片区域 */}
              {previewUrl && (
                <div style={{ marginTop: '10px' }}>
                  <img 
                    src={previewUrl} 
                    alt="预览图" 
                    style={{ maxWidth: '300px', maxHeight: '300px' }}
                  />
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </Modal>
  );
}

export default MakeModal;

const Modal = styled.div`
  display: ${props=>props.isModal===true?'block':'none'};
  position: fixed;
  background-color: rgba(0,0,0,0.65);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 500343;

  .box9_2_3_3_2 {
    background-color: rgb(0,149,246)!important;
    border: 1px solid transparent;
    border-radius: 4px;
    color: white;
    position: relative;
    -webkit-appearance: none;
    background: none;
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    padding: 8px 16px;
  }
`;

关键说明 #

1. URL.createObjectURL()：该方法会创建指向File对象的临时URL，可直接作为img标签的src实现预览。
2. 内存泄漏预防：每次生成新预览URL时，必须用URL.revokeObjectURL()释放旧URL，否则浏览器会持续占用内存资源，这里通过useEffect的清理函数自动处理。
3. 文件类型限制：添加accept="image/*"让文件选择器仅显示图片文件，提升用户体验。

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