multer 이용한 그림파일 업로드 관련 질문입니다.

[Taeyoon Kim]

안녕하세요~ 강사님! 

multer 를 이용해서 upload.single은 문제없이 하였는데, 

upload.array에서 잘 되지 않습니다. 아래 그림과 같이 코딩은 하였는데, 

return부분에서 html 수정했고, (첫번째 그림)

server.js에서 upload.array 로 코드 수정하였습니다. (두번째 그림)

console.log로 확인해보면, 정상적으로 파일첨부는 되는것 같은데... (4번째 그림)

결론적으로, image 파일 폴더에 저장이 되지가 않습니다. 

강사님 mongodb,node.js 수업 참조해서 react에 적용해 보았는데, 제가 누락한게 있는지 질문드립니다.~~

 

 

 

[codingapple]

프론트엔드랑 백엔드에서 둘다 파일들이 잘 출력되는데

저장만 안되는것입니까 

[Taeyoon Kim]

네 저장만 안되고 있습니다. 

참! 그리고, 마지막 그림에 console에 출력된 [File,File,File,File] 리스트 구조가 아마 아래 형식인 것 같은데,

[{0:File{...},1:File{...}, 2:{File},...] 이 부분이 , upload.array 함수의 형식에 맞지 않는건가요?

하지만, upload.single 이 받는 파라미터 확인해보니, File{...} 형식으로 되어 있더라구요.  그럼 맞는것 같기도 한구요. 

아, 그리고, 아래 코드 보시면 server에서 app.post 코드 부분인데, req.body.file[0]으로 바꾸어서 출력해보면,   '['   이렇게 출력됩니다. 

req.body.file[1]로 출력하면 "f"출력됩니다. formdata로 보내걸 req로 받아서 출력하면 그냥 파일 이름으로만 출력이 되는데, 혹시 이미지 파일 자체로 받을 수는 없나요? 사실 바로 DB에도 보내고 싶어서요. 

app.post('/upload', upload.array("file", 10), function (req, res) {
console.log(req.body)
res.send("completed")
})

 

[codingapple]

<input type="file" name="profile" multiple="multiple" onChange={(e)=>{
            let formData = new FormData();
            for (let i = 0; i < e.target.files.length; i++) {
              formData.append('profile', e.target.files[i])
            }
            axios.post('http://localhost:8080/upload', formData).then((result)=>{
              console.log(result)
            })
          }} />

이렇게 하니까 되던데 이걸로 해봅시다 

파일이름이나 그런건 req 가져다가 쓰시면 됩니다

[Taeyoon Kim]

네 해결했습니다 ^^

전 강사님과 다르게  'profile{i}' 이런식으로 했었는데,

이부분을 잘못했었네요. 

사실 이 부분 때문에 하루 반을 날려버렸거든요 ㅠㅠ

친절히 도움주셔서 정말 감사드립니다!

[글쓴이]

글