상품 등록 기능을 구현하면서 상품의 제품설명 이미지를 등록하는 기능을 제작하였다. 등록된 이미지는 파이어스토어 스토리지에 저장되고, 스토리지에서 제공되는 웹 이미지 URL을 이용하여 상품 페이지에서 이미지를 출력하는 방식이다.

그런데 위와 같은 에러가 발생하였다.

1. 스토리지의 저장 경로.

에러의 원인은 파일을 스토리지에 저장할 때, 함수의 인자로 보내는 저장 경로가 잘못된 것이었다.

for (let i = 0; i < 3; i++) {
	const imagesRef = ref(storageRef, `${infoFileNames[i]}`);
	await uploadBytes(imagesRef, infoFiles[i]);
};

만약 스토리지 내부에 폴더를 따로 두지않고 그냥 업로드하고자 한다면 파일 이름 앞에 '/'를 붙여주어야 한다.

const imagesRef = ref(storageRef, `/${infoFileNames[i]}`);

2. 스토리지에서 분류를 하고 싶다면?

스토리지 내부에 따로 폴더를 만들어 업로드하고 싶다면 다음과 같이 경로를 설정해주면 된다.

const imagesRef = ref(storageRef,`productsInfoImage/${productInfo.name}/${infoFileNames[i]}`);

여기서 productsInfoImage와 productInfo.name은 폴더의 이름이 된다. 파일을 업로드 했을 때, 스토리지는 내부에 동일한 이름의 폴더가 있다면 거기에 파일을 저장하고, 없다면 새롭게 폴더를 만든 다음에 파일을 저장시킨다. 이 경우 경로의 가장 앞에 /를 붙여줄 필요는 없다.