React.js中从文件输入框获取图片数据并实现预览的问题排查

你的代码核心问题在于：文件输入框的e.target.value是本地文件的路径字符串，但浏览器的安全策略不允许直接通过这个路径加载本地图片，所以<img>标签无法识别这个src值，自然没法正常显示预览图。

要实现本地图片预览，我们需要借助浏览器提供的API来生成可识别的图片资源地址，下面是两种可行的修正方案：

方案一：使用URL.createObjectURL()（性能更优） #

这个方法会创建一个指向文件对象的临时URL，不需要读取整个文件内容，性能更好，还能避免内存占用过高的问题：

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

  handleFileChange = e => { 
    // 获取选中的第一个文件对象
    const file = e.target.files[0];
    if (file) {
      // 生成临时URL并更新state
      const imageUrl = URL.createObjectURL(file);
      this.setState({ imageUrl });
    }
  } 

  // 组件卸载时释放临时URL，防止内存泄漏
  componentWillUnmount() {
    if (this.state.imageUrl) {
      URL.revokeObjectURL(this.state.imageUrl);
    }
  }

  render(){ 
    return( 
      <div> 
        {/* 限制仅接受图片文件，提升用户体验 */}
        <input type='file' accept="image/*" onChange={this.handleFileChange} /> 
        {/* 有图片地址时再渲染img，避免初始状态的警告 */}
        {this.state.imageUrl && <img src={this.state.imageUrl} alt="预览图片" />} 
      </div> 
    ) 
  } 
}

方案二：使用FileReader API #

这个方法会读取文件内容并转换成base64格式的DataURL，适合需要获取文件原始内容的场景：

class ImagePicker extends React.Component { 
  constructor(props){ 
    super(props); 
    this.state = { imageData: null } 
  } 

  handleFileChange = e => { 
    const file = e.target.files[0];
    if (file) {
      const reader = new FileReader();
      // 文件读取完成后更新state
      reader.onload = (event) => {
        this.setState({ imageData: event.target.result });
      };
      // 以DataURL格式读取图片文件
      reader.readAsDataURL(file);
    }
  } 

  render(){ 
    return( 
      <div> 
        <input type='file' accept="image/*" onChange={this.handleFileChange} /> 
        {this.state.imageData && <img src={this.state.imageData} alt="预览图片" />} 
      </div> 
    ) 
  } 
}

额外优化说明 #

• 添加accept="image/*"属性，限制输入框仅接受图片类型文件，减少用户误操作；
• 渲染<img>前先判断state中的图片地址是否存在，避免初始状态下src为null导致的控制台警告；
• 使用URL.createObjectURL()时，务必在组件卸载时调用URL.revokeObjectURL()释放临时资源，防止内存泄漏。

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