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

我正在尝试在我的web应用程序中显示从我的计算机中选择的图像。我提到了下面的问题，它解决了我试图解决的问题

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

文档

试试这个

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

或者您可以使用

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}/>

希望它对您有用

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

提交表单

  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 => {});
  };

---

最近我发现需要一个类似的功能。下面是我使用

钩子的实现

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>
  );
}


导出默认函数App（）{
const[image，setImage]=React.useState（“”）；
const imageRef=React.useRef（null）；
函数useDisplayImage（）{
const[result，setResult]=React.useState（“”）；
函数上传器（e）{
const imageFile=e.target.files[0]；
const reader=new FileReader（）；
reader.addEventListener（“加载”，（e）=>{
setResult（即目标结果）；
});
reader.readAsDataURL（imageFile）；
}
返回{result，uploader}；
}
const{result，uploader}=useDisplayImage（）；
返回(
{
setImage（e.target.files[0]）；
上传器（e）；
}}
/>
{结果&&}
);
}

我创建了一个自定义的
hook
，这样它就可以在应用程序中的任何地方重用。
hook
返回图像
src
和
uploader
函数
。
然后，图像
src
可以链接到
，然后在
输入
更改时，您只需将
e
传递到
上传程序
功能
即可获得此错误。未捕获的TypeError:无法读取null的属性“image”。谢谢。您的解决方案帮助了！！URL.createObjectURL为我工作！
  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 => {});
  };

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>
  );
}