프론트에서 이미지를 전달받아서 서버측에서 저장을 할때 uploads폴더에 이미지가 저장되게 했는데 1. img태그에 src속성을 보면 왜 uploads폴더에서 가져오지않고 로컬호스트에서 가져오는지 이해가 가지않습니다. 이미지를 uploads폴더에 저장을 해놨는데 다시 서버에 접근하는 느낌을 잘 모르겠습니다. 그냥 uploads폴더에 있는거 가져다가 쓰면 왜 안되는걸까요? 2. uploads폴더에 이미지를 저장한후에 다시 화면으로 가져오는과정이, uploads폴더에 있는거 서버에 올림 -> 서버에 이미지가 올라와있음 -> 서버측에서 프론트로 올림 이런느낌인걸까요? 그러면 다시 이해가 안가는게 localhost/uploads/이미지 왜 이렇지 않은걸까요..? 만약에 여러폴더에 같은이름으로 이미지가 저장되있다면 폴더명을 명시해줘야하는게 아닌가요ㅠㅠ
안녕하세요. 강의 진행 중 질문있어 남깁니다.! 1. //파일 보내기 const dropHandler = ( files ) => { let formData = new FormData () ; const config = { header : { " content-type " : " multipart/form-data " }, //헤더에다가 어떤 타입인지 전달해주는 것. }; formData . append ( " file " , files[ 0 ]) ; Axios . post ( " /api/product/image " , formData , config) . then ( ( response ) => { if (response . data . success) { console . log (response . data) ; setImages ([ ... Images , response . data . filePath]) ; //원래 있던것을 넣고(spread문법) -> 이후 새로운 것을 추가. } else { alert ( " 파일을 저장하는데 실패했습니다. " ) ; } } ) ; }; 위 코드에서 fromData객체는 ajax통신에서 사용하는 keyvalue값을 갖는 formData인것인가요? 그렇다면append()코드로 인해서, file이 key, files[0]이 value인것인가요? 2. multer과 관련하여 공식문서를 읽어보니 아래 주석과 같이 .single을 설명하였습니다. .single(fieldname) fieldname 인자에 명시된 이름의 단수 파일을 전달 받습니다. 이 파일은 req.file 에 저장될 것 입니다 */ const upload = multer ( { storage : storage } ) . single ( " file " ) ; 저 단수 파일 이름을 전달 받는다는 의미를 잘 모르겠습니다. 어째서("file")이라고 주신거죠?? multer와 single함수의 이용을 잘 모르겠습니다 ㅠ 3. 2번 직후에 실행되는 코드입니다. 아래 코드가 이해가 가질않습니다 ㅠ router . post ( " /image " , ( req , res ) => { //가져온 이미지를 저장해준다. upload (req , res , ( err ) => { if (err) { return req . json ( { success : false , err } ) ; //이부분은 req.json이 맞나요 ? } return res . json ( { success : true , filePath : res . req . file . path , fileName : res . req . file . filename , } ) ; } ) ; } ) ; post입력을 받는다 -> 콜백을 실행 -> upload()실행 ? ->upload는 어떤 행위를 하는 코드인가요? 제가 이해한 흐름은 2번의 multer()함수는 파일이 어디로 업로드 될 지 알려주는 코드이고, storage를 통해 파일에 대한 정보를 갖는다. -> 따라서 post작업을 보낸 후, 콜백으로 실행된 upload함수로 인해 앞서 말한 파일 정보를 res으로 받는다.(이때 .single()로 인해 req.body안에 정보가 담겨온다.) -> 따라서 res.req.file.****을 사용 하는데, 이 ****은 아래 api에 나타나있는 파일 정보에 해당하는 부분이다. 이 흐름이 맞을까요?? 4. 왜인지 모르겠지만 저는 이미지 업로드를 콘솔창에 찍어볼 경우 아래처럼 path가 나옵니다. 상관없을까요??
multer 수업을 수강한뒤 이미지 업로드를 위해 수업 실습처럼 이미지를 먼저 서버에 전송하여 압축한 뒤 이후에 저는 게시물이 아닌 동아리 정보 등록 폼으로 작성을 하려고 합니다. 실습과 같이 /img 라우터로 res.json을 이용해 url까지 전송하였습니다. 그 후 폼 제출 버튼을 클릭해서 콘솔로 req.body.url을 확인해보면 undefined 라고 나옵니다.. 저는 왜 req.body.url에 정보가 없는건가요??
강의와 관련있는 질문 을 남겨주세요. • 강의와 관련이 없는 질문은 지식공유자가 답변하지 않을 수 있습니다. (사적 상담, 컨설팅, 과제 풀이 등) • 질문을 남기기 전, 비슷한 내용을 질문한 수강생이 있는지 먼저 검색 을 해주세요. (중복 질문을 자제해주세요.) • 서비스 운영 관련 질문은 인프런 우측 하단 ‘문의하기’ 를 이용해주세요. (영상 재생 문제, 사이트 버그, 강의 환불 등) 질문 전달 에도 요령이 필요합니다. • 지식공유자가 질문을 좀 더 쉽게 확인할 수 있게 도와주세요. • 강의실 페이지 (/lecture) 에서 '질문하기'를 이용해주시면 질문과 연관된 수업 영상 제목이 함께 등록됩니다. • 강의 대시보드에서 질문을 남길 경우, 관련 섹션 및 수업 제목을 기재 해주세요. • 수업 특정 구간에 대한 질문은 꼭 영상 타임코드 를 남겨주세요! 구체적인 질문 일수록 명확한 답을 받을 수 있어요. • 질문 제목은 핵심 키워드를 포함해 간결하게 적어주세요. • 질문 내용은 자세하게 적어주시되, 지식공유자가 답변할 수 있도록 구체적으로 남겨주세요 . • 정확한 질문 내용과 함께 코드 를 적어주시거나, 캡쳐 이미지 를 첨부하면 더욱 좋습니다. 기본적인 예의 를 지켜주세요. • 정중한 의견 및 문의 제시, 감사 인사 등의 커뮤니케이션은 더 나은 강의를 위한 기틀이 됩니다. • 질문이 있을 때에는 강의를 만든 지식공유자에 대한 기본적인 예의를 꼭 지켜주세요. • 반말, 욕설, 과격한 표현 등 지식공유자를 불쾌하게 할 수 있는 내용 은 스팸 처리 등 제재를 가할 수 있습니다. 안녕하세요 강의코드를 응용해서 폴더를 받아 폴더안 파일들을 하나씩 axios 로 보내주고 있습니다 다른 파일들은 정상적으로 보내지는데 , config.json, tsconfig.json 파일을 전송할때 서버가 재시작되어 네트워크 오류가 발생됩니다. 업로드는 multer 를 이용하는데, 서버가 재시작되었다는건 스트림으로 config.json 파일을 읽어서 그런것인가요? 이경우 업로드를 하려면 어떻게 해야하나요? (업로드방지 기능을 만들어서 업로드못하게 막는게 맞을까요?) (tsnode 이용해서 node.js + typescript 로 구축했습니다)
