입력 유형 = 파일에서 선택한 이미지를 반응으로 표시하는 방법JS

입력 유형 = 파일에서 선택한 이미지를 반응으로 표시하는 방법JS

컴퓨터에서 선택한 이미지를 웹 앱에 표시하려고 합니다.나는 내가 고치려는 질문에 대해 다음과 같은 질문을 언급했다.

서버에 데이터를 보내지 않고 선택한 이미지를 표시하는 방법

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

이거 드셔보세요

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

최근에 비슷한 기능이 필요하다는 것을 알게 되었습니다.다음은 다음을 사용한 구현입니다.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이미지src다음으로 에 링크할 수 있습니다.<img src={..} />그 다음에input거스름돈은 그냥 통과할 수 있습니다.e에게uploader function.

잘 됐으면 좋겠다

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

on Image Change

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

언급URL : https://stackoverflow.com/questions/43992427/how-to-display-a-image-selected-from-input-type-file-in-reactjs