显示来自输入的文件图像

Question

我正在尝试显示从输入中选择的文件的图像，而不向服务器发送数据。

想用 URL.createObjectUrl 来做。

const onImageChange = (event) => {
        if (event.target.files && event.target.files[0]) {
          this.setState({
            image: URL.createObjectURL(event.target.files[0])
          });
        }
       }

<input type="file" 
      onChange={onImageChange} 
      className="filetype" 
      id="group_image"/>

然后在里面传一张图片

<img 
      id="target" 
      src={this.state.image}/>

但是我得到 undefined has no properties 这个代码。那么有人知道怎么做吗？

编辑：https://codesandbox.io/s/restless-sun-61uui?file=/src/App.js

完整代码：

import React from 'react'

const Addfile = () => {
const onImageChange = (event) => {
        if (event.target.files && event.target.files[0]) {
          this.setState({
            image: URL.createObjectURL(event.target.files[0])
          });
        }
       }

    return (
        <div>
      <input type="file" 
      onChange={onImageChange} 
      className="filetype" 
      id="group_image"/>
      
      <img 
      id="target" 
      src={this.state.image}/> 
        </div>
    )
}

export default Addfile

Answer 1

您正在使用功能组件。没有this.state，不是吗？

你应该使用 useState。我为您更新了 codesandbox：https://codesandbox.io/s/zealous-noether-3tz4f?file=/src/App.js

显示来自输入的文件图像

Displaying an image of a file from input

reactjs

input-type-file