수정 버튼 눌렀을 때 이전 이미지 경로
434
4 asked
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)}
/>
이런식으로 해주었는데 안떠서 그런데 어떤식으로 해야 수정할 때 이전의 이미지 경로가 뜨게 될까요 ??
Answer 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 값을 전달하여 이전 이미지 경로를 표시할 수 있습니다.
이상입니다. 참고가 되셨길 바랍니다. 감사합니다.
Heroku 데이터로드 문제.
0
179
2
몽고DB
0
167
1
No routes matched location Error Component Stack error 질문입니다.
0
574
1
axios 문제 404에러
0
2113
1
도와주세요
0
450
3
네이버 클라우드를 사용하지 않는 사람은 외부저장소~env 까지 따라하지 않아도 되죠?
0
234
0
두번씩 실행되는 문제..
0
460
1
스타일 깃허브에서 코드 가져가라고 하셨는데요
0
462
2
read(2) 강의 내용에 질문이 있습니다.
0
265
1
깃허브
0
343
1
마지막에 "" 로 채워주는 이유가 있을까요?
0
283
1
React-router-dom을 설치하고 react app이 크롬에서 실행되지 않습니다.
0
379
1
Detail.js CSS 관련 강의가 없어진거 같은데요 ?
0
280
1
504 에러
0
850
1
콘솔에 DOM이라는 로그가 뜨는데
0
284
1
useEffect 두번 사용하는 것
0
923
1
작동은 잘되는데 오류가 뜹니다
0
438
1
react-router-dom 현재 최신버전
0
612
1
Test.js 소스코드 볼 수 있을까요?
0
489
2
닉네임 중복검사 시 404 에러
0
506
1
이미지 수정이 안되고 이전 이미지 경로가 안떠요 ㅜㅜ
0
558
1
upload에서 제출 시 오류
0
612
2
여기 학습에 필요한 css 이거 어디에 있나요?
1
613
1
useEffect 요런거 눌르면 자동으로 ()=>{ ) 어런식으로 자동완성 되자나요? 그거어떻게 하나요? ㅠㅠ
1
550
1

