이미지 업로드 방법

오늘은 이미지 업로드 방법을 적어보려고 한다!!

  const [imageUrls, setImageUrls] = useState(["", "", ""]);

먼저 image 주소를 담을 변수를 선언한다.
image 주소를 배열형태로 서버에 보내기 위해 배열로 초기값을 주었다.

   {imageUrls.map((el, index) => (
            <div key={uuidv4()} style={{ margin: 30 }}>
              <img
                style={{ width: 50, height: 50 }}
                src={"https:/storage.googleapis.com/" + imageUrls[index]
              ></img>
              <input
                type="file"
              ></input>

그리고 input 태그에 "file" 타입을 준다.
그러면 파일을 인풋 태그에 넣을 수 있다.
그리고 img 태그 src 속성에 이미지 주소를 넣는다.

const onChangeImageUpload = (event: ChangeEvent<HTMLInputElement>) => {
      const file = event.target.files?.[0]; 
      const result = await upload_file({
        variables: { file: file },
      });
    };

그리고 onChangeImageUpload라는 함수를 선언한다.
그리고 file라는 변수를 선언하고 event.target.files?.[0];으로 이미지 주소를 file 변수에 저장한다.
그 다음에는 서버에 이미지를 보낸다.
그러기 위해 reuslt 변수에 api 요청을 작성하였다.

const onChangeImageUrls = (imageUrl: string, index: number) => {
    const newImageUrls = [...imageUrls]; // newImageUrls = ["", "", ""] // 얕은 복사
    newImageUrls[index] = imageUrl; // ["imageSrc1.png" , "", ""] = "imageSrc1.png" // 인덱스가 0일 경우
    setImageUrls(newImageUrls); // ["imageSrc1.png" , "", ""] = "imageSrc1.png" // 인덱스가 0일 경우
  };

그리고 onChangeImageUrls 함수를 선언해 준다.
이 함수에는 매개변수로 하나의 이미지 주소와 배열의 인덱스 값을 받을거다.
그리고 imageUrls 변수에 ima 주소 값을 넣어주기 위해 인덱스에 맞는
즉 순서에 맞는 배열의 칸에 이미지를 넣어준다.
그리고 원본 배열을 건드리지 않기위해 얕은 복사를 하고 넘겨준다.

 const onChangeImageUpload =
    (index: number) => async (event: ChangeEvent<HTMLInputElement>) => {
      const file = event.target.files?.[0]; // file.name = "imageSrc1.png"
      const result = await upload_file({
        variables: { file: file },
      });
      onChangeImageUrls(result.data?.uploadFile.url, index);
      //  result.data?.uploadFile.url = imageSrc1.png
    };

그리고 onChangeImageUpload함수를 onChangeImageUrls이 함수 안에 넣는다.
즉 onChangeImageUrls이 함수가 실행이 되면서 onChangeImageUpload 함수가 실행이되어 imageUrls 변수에 이미지가 하나씩 담기게 된다.
그리고 onChangeImageUrls(result.data?.uploadFile.url, index) 이 함수를 호출할 때 매개변수로 이미지 주소와 인덱스 값을 넣어준다.
그러면 이미지 업로드는 끝이다!!