URL.createObjectURL()

image Blob객체를 url로 만든다.

ex) React에서 사용

const [image,setImage] = useState(null);

**const handleImage = (e) => {
  setImage(URL.createObjectURL(e.target.files[0]));
  e.target.value = ''; // 데이터가 바뀔 때만 작동하므로 value를 리셋해주면 같은 파일도 올릴 수가 있다.
}**

return (
  <div>
    {image ? <img src={image}/> : null}
   <label>
     <UploadButton>
       이미지 업로드
       <input accept="image/*" src={image} type='file' onChange={e => handleImage(e)} 
        style={{display:'none'}}></input>
     </UploadButton>
   </label>
  </div>)
// labbel은 input의 표지 역할을 한다.(기존 input의 생김새를 숨기고 기능이 되도록 한다.)

const UploadButton = styled.div`
  background-color: black;
  color: white;
  text-align: center;
  line-height: 60px;
  width: 400px;
  height: 60px;
  border-radius: 5px;
  font-weight: bold;
  font-size: 20px;
  cursor: pointer;
`;