React 이미지 리사이징 및 업로드

구현사항

1. 이미지 최대 3개 업로드
2. 이미지 리사이징

업로드 가능 갯수 제한

이미지를 최대 3개까지만 업로드 할 수 있도록 제한하는 코드는 다음과 같다.
new DataTransfer() 과 URL.createObjectURL을 사용했던 이유가 있는데 잘 기억이 안난다. 참고한 블로그랑 나중에 같이 추가해야겠다.

const handleUploadImage = e => {
    const selectedFIles = [];
  	
  	//이미지를 최대 3개까지만 업로드 가능하게 해주기 위해 길이 제한
   	const fileLength = e.target.files.length > 3 
    ? 3 : e.target.files.length;
  
    
    const transfer = new DataTransfer();
    Array.from(e.target.files)
        .slice(0, fileLength)
        .forEach(file => {
          transfer.items.add(file);
        });
    e.target.files = transfer.files;
    setImages([...e.target.files]);
     
	// 이미지 미리보기
    const targetFilesObject = [...e.target.files];
    targetFilesObject.map(file => {
      return selectedFIles.push(URL.createObjectURL(file));
    });
    setShowImages(selectedFIles);
  };

용량을 줄이기 전에는
미리보기 아주 잘 나온다.
서버에 보낼 이미지 상태관리 아주 잘 된다.

문제발생

이미지 리사이징을 하고 난 이후부터 미궁 속으로 빠졌다. 온갖 곳에서 문제가 발생했다.

문제 1.

blob 형식은 transfer.add.items가 안된단다.

문제 미해결1

const handleUploadImage = async e => {
    const selectedFiles = [];

    const fileLength = e.target.files.length > 3 ? 3 : e.target.files.length;
    const transfer = new DataTransfer();
    Array.from(e.target.files)
      .slice(0, fileLength)
      .forEach(async file => {
        const compressed = await handleImageCompress(file);
        console.log(compressed);
      });
    e.target.files = transfer.files;
    setImages([...e.target.files]);

  
  	// 이미지 미리보기
    const targetFilesObject = [...e.target.files];
    targetFilesObject.map(file => {
      const test = URL.createObjectURL(file);
      return selectedFiles.push(test);
    });
    setShowImages(selectedFiles);
  };