如何在reactJS中显示从输入类型=文件中选择的图像

Question

我正在尝试在我的网络应用程序中显示从我的计算机中选择的图像。我提到了以下问题，该问题解决了我要解决的问题。

如何在不向服务器发送数据的情况下显示所选图像？

我有这样的 html 部分

 <div className="add_grp_image_div margin_bottom">
      <img src={img_upload} className="add_grp_image"/>
      <input type="file" className="filetype" id="group_image"/>
      <span className="small_font to_middle">Add group image</span>
      <img id="target"/>
 </div>

我想在

<img id="target"/>

我怎样才能做到这一点？

我也提到 FileReader 文档。

https://developer.mozilla.org/en-US/docs/Web/API/FileReader

原文由 CraZyDroiD 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

尝试这个

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

将方法添加到类

onImageChange = (event) => {
  if (event.target.files && event.target.files[0]) {
    let reader = new FileReader();
    reader.onload = (e) => {
      this.setState({image: e.target.result});
    };
    reader.readAsDataURL(event.target.files[0]);
  }
}

或者你可以使用 URL.createObjectURL

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

并显示图像

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

对于钩子版本：

 const [image, setImage] = useState(null)

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

return (
  <div>
    <input type="file" onChange={onImageChange} className="filetype" />
    <img src={image} alt="preview image" />
  </div>
)

原文由 Giang Le 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

最近我发现需要一个类似的功能。这是我使用 hooks 的实现。

 export default function App() {
  const [image, setImage] = React.useState("");
  const imageRef = React.useRef(null);

  function useDisplayImage() {
    const [result, setResult] = React.useState("");

    function uploader(e) {
      const imageFile = e.target.files[0];

      const reader = new FileReader();
      reader.addEventListener("load", (e) => {
        setResult(e.target.result);
      });

      reader.readAsDataURL(imageFile);
    }

    return { result, uploader };
  }

  const { result, uploader } = useDisplayImage();

  return (
    <div className="App">
      <input
        type="file"
        onChange={(e) => {
          setImage(e.target.files[0]);
          uploader(e);
        }}
      />
      {result && <img ref={imageRef} src={result} alt="" />}
    </div>
  );
}

我创建了一个自定义 hook 以便它可以在应用程序的任何地方重复使用。 hook 返回图像 src 和 uploader function The image src can then be linked to the <img src={..} /> and then on input change you can just pass in the e to the uploader function 。

原文由 Abeid Ahmed 发布，翻译遵循 CC BY-SA 4.0 许可协议