[React] 이미지 업로드 및 미리보기

먼저 여러장의 이미지를 업로드하고 미리보기 위해 

images: {
  detailImageFile: [],
  detailImageUrl: [],
},

위와 같은 state를 생성한다.

 

<div className="choice_file">
  <label htmlFor="file_box" className="btn_prod">
    사진 선택
  </label>
  <input
    type="file"
    accept=".jpg, .jpeg, .png"
    id="file_box"
    onChange={({ target: { files } }) => {
      if (files.length) {
        setImageFromFile({
          file: files[0],
          setImageUrl: ({ result }) =>
            this.setState({
              ...this.state,
              detailImageFile: this.state.images.detailImageFile.push(
                files[0]
              ),
              detailImageUrl: this.state.images.detailImageUrl.push(
                result
              ),
            }),
        })
      }
    }}
  />
</div>

이후 위와 같이 file type의 input 박스를 만들어 준 뒤 onChange의 인자로 실행 할 함수와 setState를 넘겨준다.

 

실행이 되면

 

setImageFromFile = ({ file, setImageUrl }) => {
  let reader = new FileReader()
  reader.onload = function () {
    setImageUrl({ result: reader.result })
  }
  reader.readAsDataURL(file)
}

위 함수에서 file과 url을 state에 저장한다.

 

{images.detailImageFile &&
  images.detailImageUrl.map((image, index) => (
    <span className="quickSearch_image_area" key={index}>
      <div>
        <img
          id="image_cancle"
          src="static/assets/images/image_cancle.svg"
          alt=""
        />
      </div>
      <div>
        <img src={image} alt="image" />
      </div>
    </span>
  ))}

위와 같이 Map 함수를 이용해 여러 장의 이미지를 미리보기로 띄워줄 수 있으며, 취소 버튼또한 생성하여 state 배열에서 원소를 지워주는 방식으로 업로드한 이미지를 삭제할 수 있다.