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

Posted

技术标签:

【中文标题】如何在reactJS中显示从输入类型=文件中选择的图像【英文标题】:How to display a image selected from input type = file in reactJS 【发布时间】:2017-10-15 00:03:06 【问题描述】:

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

How to display selected image without sending data to server?

我的 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

【问题讨论】:

【参考方案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  />
  </div>
)

【讨论】:

我收到此错误。未捕获的类型错误:无法读取 null 的属性“图像” 谢谢。您的解决方案有帮助! 太好了。这对我帮助很大。只是表示感谢。【参考方案2】:

希望对你有用

            <form onSubmit=form => submitForm(form)>
              <input
                accept="image/*"
                onChange=onImageChange
                className=classes.inputImage
                id="contained-button-file"
                multiple
                name="image"
                type="file"
              />
              <label htmlFor="contained-button-file">
                <IconButton component="span">
                  <Avatar
                    src=mydata.imagePreview
                    style=
                      margin: "10px",
                      width: "200px",
                      height: "200px"
                    
                  />
                </IconButton>
              </label>
              <Button
                type="submit"
                variant="outlined"
                className=classes.button
              >
                Default
              </Button>
            </form>

onImageChange

  const onImageChange = event => 
    if (event.target.files && event.target.files[0]) 
      let reader = new FileReader();
      let file = event.target.files[0];
      reader.onloadend = () => 
        setData(
          ...mydata,
          imagePreview: reader.result,
          file: file
        );
      ;
      reader.readAsDataURL(file);
    
  ;

提交表格

  const submitForm = form => 
    form.preventDefault();
    const formData = new FormData();
    formData.append("image", mydata.file);
    // for (var pair of formData.entries()) 
    //   console.log(pair[1]);
    // 
    const config = 
      headers: 
        "content-type": "multipart/form-data"
      
    ;
    axios
      .post("api/profile/upload", formData, config)
      .then(response => 
        alert("The file is successfully uploaded");
      )
      .catch(error => );
  ;

【讨论】:

【参考方案3】:

最近我发现需要一个类似的功能。这是我使用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  />
    </div>
  );


我创建了一个自定义hook,以便可以在应用程序的任何地方重复使用它。 hook 返回图像 srcuploader function。 然后可以将图像src 链接到&lt;img src=.. /&gt;,然后在input 更改上,您只需将e 传递给uploader function

【讨论】:

以上是关于如何在reactJS中显示从输入类型=文件中选择的图像的主要内容,如果未能解决你的问题,请参考以下文章

ReactJS - 从 URL 获取 json 对象数据

如何使用 Reactjs 显示 xml 数据

带有禁用日期的 ReactJS 日期范围选择器 - Rsuite

聚焦时如何使用 Reactjs 选择输入中的所有文本?

reactjs错误-onChange不是函数错误

ReactJs:根据选择值显示或隐藏输入字段