React：如何显示从base64转换为File的裁剪图片

要在img标签中显示转换后的File对象，核心是用URL.createObjectURL()方法将File对象转换为浏览器可识别的Blob URL，具体实现如下：

步骤1：生成Blob URL #

拿到转换后的File对象后，调用URL.createObjectURL()生成对应的可访问URL：

// 假设你已经得到了转换后的File对象，命名为croppedFile
const imageUrl = URL.createObjectURL(croppedFile);

步骤2：在img标签中使用 #

直接将生成的imageUrl赋值给img的src属性即可：

<img src={imageUrl} alt="裁剪后的图片" />

步骤3：清理URL避免内存泄漏 #

Blob URL会占用浏览器内存，所以在组件卸载或File对象更新时，必须释放旧的URL：

• 函数组件中使用useEffect清理：

import { useEffect, useState } from 'react';

function CropperDemo() {
  const [imageUrl, setImageUrl] = useState(null);

  // 裁剪逻辑：获取base64并转换为File对象后生成URL
  const handleCrop = () => {
    // 省略react-cropper获取cropData、转换为File对象的代码
    const croppedFile = ...; // 你的File对象
    const url = URL.createObjectURL(croppedFile);
    setImageUrl(url);
  };

  // 组件卸载或imageUrl更新时清理旧URL
  useEffect(() => {
    return () => {
      if (imageUrl) {
        URL.revokeObjectURL(imageUrl);
      }
    };
  }, [imageUrl]);

  return (
    <div>
      {/* 你的react-cropper组件 */}
      <button onClick={handleCrop}>完成裁剪</button>
      {imageUrl && <img src={imageUrl} alt="裁剪后图片" />}
    </div>
  );
}

• 类组件中在生命周期钩子中清理：

class CropperDemo extends React.Component {
  constructor(props) {
    super(props);
    this.state = { imageUrl: null };
    this.croppedFile = null;
  }

  handleCrop = () => {
    const url = URL.createObjectURL(this.croppedFile);
    this.setState({ imageUrl: url });
  };

  componentWillUnmount() {
    if (this.state.imageUrl) {
      URL.revokeObjectURL(this.state.imageUrl);
    }
  }

  componentDidUpdate(prevProps, prevState) {
    // 当imageUrl更新时，清理旧的URL
    if (prevState.imageUrl && prevState.imageUrl !== this.state.imageUrl) {
      URL.revokeObjectURL(prevState.imageUrl);
    }
  }

  render() {
    return (
      <div>
        {/* 你的react-cropper组件 */}
        <button onClick={this.handleCrop}>完成裁剪</button>
        {this.state.imageUrl && <img src={this.state.imageUrl} alt="裁剪后图片" />}
      </div>
    );
  }
}

额外提示 #

如果只是为了显示图片，其实不需要把base64转成File对象，直接将cropData（base64字符串）赋值给img的src属性就能正常显示：

<img src={cropData} alt="裁剪后的图片" />

转换为File对象通常是为了满足上传等后端接口需求，若仅用于预览，直接使用base64会更简洁。

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