팀프로젝트..
어제 이미지 업로드가 안돼서 오늘 따로 form만 꺼내서 확인을 해보는데 키가 다르다고 해서 찾아보다 .env에 key값이 짤린걸 찾을 수 있었습니다.
그래서 성민님께 다시 키값을 받은 뒤 확인해보니 사진이 잘 저장된것을 볼 수 있었습니다.
그리고 회원가입의 모달을 form을 넣어 사진도 파일업로드가 가능하게 수정해주었고, 저장된 사진이 잘 나오는 것도 보았습니다. 하지만 회원정보 수정에서 저장된 파일이름이 나오면 좋겠는데 되지 않아 찾아보니 보안상의 이유로 불가능하다는 것을 알았습니다.
그래서 다른 방법을 찾아보다 제 생각엔 db에 저장된 파일을 불러 회원정보 수정에서 값이 없을 경우 대신 넣어주면 되지않을까 해서 시도해보았으나, 저장될땐 req.file.location으로 들어가서 다시 file에 저장하는것은 불가능했습니다.
그래서 이 location한것을 다시 원상복구를 할수 없나 찾는 중입니다.
일단은 localstorage에서 값을 제대로 저장을 못하는것을 확인해서 수정했습니다.
그래서 일단 회원가입과 회원정보 수정은 잘되는것을 확인했으나 아직 기본으로 입력되야하는것들 중 file은 하지 못했습니다.
중간에 한번 더 모여서 회의를 했는데 회원가입과 회원정보 수정에서 해당파일이 이미지 파일일 경우에만 업로드가 가능해야한다고 하시며 코드를 주셔서 받아온 뒤 좀 수정해서 넣어줬습니다.
그리고 파일이 기본 값을 가질 수 있게 하신다고 하셔서 전 기존 저장된 파일값을 불러오는것을 해보려 합니다.
성민님이 회원가입과 회원정보 수정시에도 파일을 받아오는데 이미지파일일 경우에만 가능하게 해야한다고하셔서 미들웨어에 있던 파일 확장자 확인코드를 넣으면 좋겠다고 하시며 코드를 주셔서 넣었습니다.
const extension =
'.' +
newFile.name
.substring(newFile.name.length - 5, newFile.name.length)
.toLowerCase()
.split('.')[1];
const allowedExtensions = ['.png', '.jpg', '.jpeg', '.jfif', '.exif', '.tiff', '.bmp', '.gif'];
if (!allowedExtensions.includes(extension) || !newFile.type.startsWith('image/')) {
alert('이미지 파일만 업로드 가능합니다.');
return;
}그런데 처음에 받은 코드에서 console이나 alert을 찍으며 확인해보니 굳이 위 처럼 작성하지 않을 거같아 수정해주었습니다.
if (newFile) {
const extension = newFile.name.split('.');
let index = 0;
for (let i in extension) {
index = i;
}
const allowedExtensions = ['png', 'jpg', 'jpeg', 'jfif', 'exif', 'tiff', 'bmp', 'gif'];
if (!allowedExtensions.includes(extension[index]) || !newFile.type.startsWith('image/')) {
alert('이미지 파일만 업로드 가능합니다.');
return;
}
form.append('newFile', newFile);
}이렇게 수정한 이유는 제가 혹시나 싶어 사진을 저장할때 . 만 여러번 넣고 시도해보니 저장이 되는것을 볼 수 있었습니다.
그래서 파일 확장자를 찾으려면 제일 마지막값을 넣어주면 될거 같아서 for문을 넣어줬습니다.
그리고 newFile에 값이 들어오지않으면 프론트앤드에서 처리를하려했는데 db에 저장된 타입과 s3에 저장하려는 타입이나 값이 달라서인지 들어가지지 않았습니다. 그래서 고민하다가 백앤드에 회원정보수정 부분에서 받아오는 file값이 없으면 저장해 뒀던 값을 넣어주게 했습니다.
//받아온 파일값이 없을경우 저장된 이미지값 불러옴
let image = filepath;
if (!filepath) {
image = userInfo.image_url;
}
그리고 get을 통해 post와 like값들을 가져와 메인페이지의 로그인창 옆에 뿌려주었습니다.
타이틀과 이름, 하트와 수를 나타나게 해주었고 해당 박스를 누르면 상세페이지로 이동하게 했습니다.
참고자료