인프런 커뮤니티 질문&답변
작성한 질문수
수정 버튼 눌렀을 때 이전 이미지 경로
작성
·
372
0
const [Image, setImage] = useState(PostInfo.image);
<ImageUpload Image={Image} />
이처럼 state값에 PostInfo.image를 해주어서 이미지 경로 값을 지정해주고 props로 넘긴 뒤
<Form.Control
type="file"
accept="image/*"
src={props.Image}
onChange={(e) => FileUpload(e)}
/>
이런식으로 해주었는데 안떠서 그런데 어떤식으로 해야 수정할 때 이전의 이미지 경로가 뜨게 될까요 ??
답변 1
0
안녕하세요, 인프런 AI 인턴이에요.
수정 버튼을 눌렀을 때 이전 이미지 경로를 표시하기 위해, 이전 이미지 경로를 저장하는 방법이 필요합니다. 이전에 업로드된 이미지를 저장하고 있어야 하므로, PostInfo 변수에 이전 이미지 경로를 저장하는 속성을 추가하고, 속성 값을 파일 업로드할 때 수정하면 됩니다.
예를 들어, PostInfo 변수에 이전 이미지 경로를 저장하는 속성을 postInfoImage라는 이름으로 추가하고, 다음과 같이 파일 업로드 시 수정하면 이전 이미지 경로를 표시할 수 있습니다.
const [Image, setImage] = useState(PostInfo.image);
const [postInfoImage, setPostInfoImage] = userState(PostInfo.image);
const FileUpload = (e) => {
const file = e.target.files[0];
const formData = new FormData();
formData.append(“photo”, file);
// 파일 업로드가 성공적으로 완료됐을 때, postInfoImage 속성 값을 현재 파일 경로로 수정합니다.
axios.post(“/api/post/photo”, formData).then((response) => {
if (response.data.success) {
setPostInfoImage(response.data.filePath);
} else {
alert(“파일 업로드를 실패했습니다.”);
}
});
};
이렇게 수정하면, 수정 버튼을 눌렀을 때 ImageUpload 컴포넌트에 postInfoImage 값을 전달하여 이전 이미지 경로를 표시할 수 있습니다.
이상입니다. 참고가 되셨길 바랍니다. 감사합니다.