훈돌라
2024. 6. 18. 아웃소싱 프로젝트 2일차 본문
레시피 CRUD 를 구현중에 있고, 등록, 수정, 삭제는 구현했으나 이미지를 업로드 하기 전 미리보기를 위해 이미지 파일을 base 64 로 문자열로 변환하여 출력했고, 그 때문에 이미지가 base 64 (만줄이 넘음) 로 들어간다.
변환하는 법을 팀원분이 알려주긴 하셨는데 이해가 잘 안 가서 내일 다시 여쭤보며 해결하려고 한다..
class RecipeAPI {
//레시피 추가 메서드
async postRecipe(recipe) {
console.log(recipe.imageSrc);
// const { data: uploadUrl, error: uploadError } = await supabase.storage
// .from('images')
// .upload('public/images/recipeimages', recipe.imageSrc, {
// cacheControl: '3600',
// upsert: false
// });
const { data, error } = await supabase.from('recipes').insert({
recipeId: recipe.id,
title: recipe.title,
// userid: user.id,
// nickname: user.nickname,
content: recipe.content,
thumbnail: recipe.imageSrc
});
}
// 레시피 삭제 메서드
async DeleteRecipe(recipe) {
const { data, error } = await supabase.from('recipes').delete().eq('recipeId', recipe);
if (error) {
console.error('Error deleting recipe:', error);
} else {
console.log('Recipe deleted:', data);
}
}
//레시피 수정 메서드
async UpdateRecipe(recipe) {
await supabase
.from('recipes')
.update({
title: recipe.title,
content: recipe.content
})
.eq('recipeId', recipe.id);
}
}
export default RecipeAPI;
로그인 기능이 도입되면
1. 유효성 검사
2. 슈퍼베이스 테이블에 이미지가 있을 때 교체하는 로직 (수정)
//이미지 미리보기, 업로드
const handleImageUpload = (event) => {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = (e) => {
setImageSrc(e.target.result);
};
console.log(file);
reader.readAsDataURL(file);
}
};