Server Side JavaScript

파일 업로드

여기서는 사용자가 업로드한 파일을 받아서 저장하는 방법에 대해서 알아봅니다. 

파일 업로드 준비

파일 업로드 양식(form)

 

multer 소개

multer 사용법 예제

multer 심화

multer 심화 예제

댓글

댓글 본문
  1. 굼벵이
    완료
  2. 이수하
    완료!
  3. 참고로 multer-ftp 모듈을 사용했습니다. 관련 자료를 찾기힘들어서 파일삭제기능이나 세션을 끊는 정보가 없네요 ..
    대화보기
    • 혹시 nodejs를 통해 파일질라 ftp서버로 파일업로드 구현해보신 분 있나요 .. 업로드까지는 성공했는데 ftp 세션을 끊는 방법을 몰라서요 .. 도와주세요
    • Woky
      form(action='upload' method='post' enctype="multipart/form-data")를
      form(action='upload' method='post' entype="multipart/form-data")로 작성하고
      multer가 file을 못찾길래 1시간동안 방법 찾는다고 애썼네요.
      구조적 오류보다 문법적 오류 특히 오타는 찾기 정말 힘든것 같아요....ㅜㅜ
    • antil
      사용자의 자유도를 높이기 위해서 callback 함수를 사용한다.
    • 박인호
      1-12
      수강완료.
      노드js가 상당히 재밌네요 ㅎㅎ 앞으로도 재밌게 배워가겠습니다. 감사합니다.
    • 초급개발자
      같은파일 구분해서 숫자매기는거만 해보려고 분석하면서 따라해봤는데 안대네요 ..

      var path = 'uploads/' + file.mimetype.split('/')[0] + '/'; 이부분이 오류나는거같은데.. ㅜㅜ

      또 uploads 폴더 안에 image 디렉토리가 없다고 오류나고.. image폴더 만들어주니까

      오류가 안나긴하는데 업로드가 안대요..
      대화보기
      • 은행동주민
        감사합니다!
      • 오타있습니다.
        파일 업로드 양식(form)을 만들때 chartset이 아니라 charset입니다.
        그리고 콘솔에 파일 오브젝트는 찍히는데 저장이 안되는경우는 multer의 dest 경로를 수정해보세요.
        저의 경우는 dest: '../uploads/'로 변경했더니 저장이 잘됩니다.
        ( ..은 상위폴더를 의미합니다. )
      • chozza
        req.file 로 찍으면 undefined 가 나오고 req.files로 찍으면 나옵니다. 그리고 폼태그 전송후 스토리지ㅣ에 지정해준 디렉토리에 파일이 저장되있지않습니다.. 에러가 찍히는것도아니고 디버깅을 어떻게 해야 할까요?
      • Seo Yun Seok Tudoistube
        호스팅에 올렸을때 파일업로드할때 경로명을 어떻게 해야 할지 궁금합니다.
        전에 스프링공부해서 템플릿프로젝트 만들어서 호스팅에 올렸는데, 파일업로드는 구현을 못했거든요.
        제 노트북에서 파일을 업로드해서 서버쪽의 디렉토리에 어떻게 넣을지 모르겠더라구요.
        이번에 Node.js 공부하고 호스팅에 올리면 꼭 파일업로드를 구현하려고 합니다.
        감사합니다^_____^!!!
      • 신입1
        감사합니다.
      • 1234123
        컹스.. 마지막에 user가 왜안된다냐
      • kNOwAnswer
        강의에서 한글로 작성하신
        파일 형식에 따른 저장 경로 변환, 파일 존재 여부에 따른 저장시 파일 이름 counting 구현 해봤습니다.

        var _storage = multer.diskStorage({
        destination: function (req, file, cb) {
        // 파일 타입에 따른 경로 지정 ex) .jpg - uploads/image, .txt - uploads/text
        var path = 'uploads/' + file.mimetype.split('/')[0] + '/';
        // 파일 경로 존재 확인
        if(!fs.existsSync(path)){
        // 없으면 폴더 생성
        fs.mkdir(path, function (err) {
        if (err) {
        console.log('failed to create directory', err);
        }
        });
        }
        cb(null, path);
        },
        filename: function (req, file, cb) {
        var path = 'uploads/' + file.mimetype.split('/')[0] + '/';
        // 파일이 저장경로 있는지 확인
        fs.readdir(path, function(err, files){
        if(err){
        console.log(err);
        res.status(500).send('Internal Server Error');
        }
        var cnt = 0;
        for(var i = 0; i<files.length; i++){
        // 저장 경로의 파일 탐색 후 있으면 같은 이름의 파일이 몇개인지 cnt
        if(files[i].indexOf(file.originalname) == 0){
        cnt++;
        }
        }
        // 여러 개의 파일이 존재 시 마지막 파일의 카운트 보다 큰 넘버를 추가하고 파일 이름 저장
        if(cnt > 0){
        cb(null, file.originalname + " - " + cnt);
        // 아니면 그냥 저장
        }else{
        cb(null, file.originalname);
        }
        });
        }
        });

        이상하거나 더 좋은 방법이 있으면 댓글로 피드백 부탁드려요~
      • beginner
        너무 감사히 잘 배우고 있습니다 :)
      • young
        아마도 var multer = require('multer') 부분이 var _storage = multer.diskStorage({.. 부분보다 뒤에위치한듯합니다.

        var multer = require('multer') 부분 위치를 앞으로 이동해주세요
        대화보기
        • daanbee
          TypeError: Cannot read property 'diskStorage' of undefined
          at Object.<anonymous> (C:\Users\hy.daanbee\Documents\dev\jsp\server_side_javascript\app_file.js:5:22)
          at Module._compile (module.js:570:32)
          at Object.Module._extensions..js (module.js:579:10)
          at Module.load (module.js:487:32)
          at tryModuleLoad (module.js:446:12)
          at Function.Module._load (module.js:438:3)
          at Module.runMain (module.js:604:10)
          at run (bootstrap_node.js:394:7)
          at startup (bootstrap_node.js:149:9)
          at bootstrap_node.js:509:3

          자꾸 이런식으로 뜨는데... 이게 문제가 뭐죠
        • 2345
          SOCKET IO 도 해주세요 현기증날거 같아요
        • 1234
          SOCKET IO 도 해주세요 현기증날거 같아요
        • fasdgoc
          console.log가 위에 가야되지 않나요
          대화보기
          • fasdgoc
            req.file.filename
            대화보기
            • soarhigh7
              Error: Failed to lookup view "Uploaded![object Object]" in views directory "./views_file"
              at EventEmitter.render (C:\server_side_javascript\node_modules\express\lib\application.js:579:17)
              at ServerResponse.render (C:\server_side_javascript\node_modules\express\lib\response.js:961:7)
              at C:\server_side_javascript\app_file.js:20:7
              at Layer.handle [as handle_request] (C:\server_side_javascript\node_modules\express\lib\router\layer.js:95:5)
              at next (C:\server_side_javascript\node_modules\express\lib\router\route.js:131:13)
              at Immediate.<anonymous> (C:\server_side_javascript\node_modules\multer\lib\make-middleware.js:52:37)
              at Immediate.immediate._onImmediate (timers.js:440:18)
              at processImmediate [as _immediateCallback] (timers.js:383:17)


              이런 에러가 뜨는데... 어떻게 해야하는지 알려주실 수 있으세요..?ㅜ
            • sSll바버미니llSs
              악 제가 잘못 보고 글을 썼다 지워졌네요. 수정하려고 했는데..
              ㅠ.ㅜ

              감사히 잘 배우고있습니다.
            • 사공이
              /uploads 폴더에 파일도 정상적으로 생성되고
              res.send('uploaded: ' + req.file); 구문도 잘 작동합니다만,
              console.log(req.file);
              이 코드 라인만 추가하면 에러가 납니다.ㅠㅠ

              console 창에서는 crashing child
              localhost:3000/upload 에서는 사이트에 연결할 수 없음. 연결이 재설정되었습니다. ERR_CONNECTION_RESET

              참고로 저는 node.js를 최신 버전 대신 v4.4를 사용하고 있는데, 이로 인해 발생되는 에러일 수 도 있나요?
              혹시 저와 같은 문제를 겪으신 분 없으신가요..ㅠㅠ
            • 지류진
              감사합니다
            • egoing
              오늘 업로드 됩니다! ^^
              대화보기
              • Anto
                정주행 하고 이제 '파일업로드' 만 남았네요,,
                html, css, js (jquery) 등 만을 다뤘던 웹퍼블리셔 3년차입니다. 진정한 Front-end 개발자로 거듭나기 위해, 첫번째 서버사이드 언어로 nodejs 를 선택하고 책과 구글링을 통해 독학하던 중에 베타테스터에 참여하게 되었습니다.
                egoing 님의 수업을 들으면서 어설프게 책보고 따라했었던, 이해도 하지못하고 따라하기만 했던 예제들이 하나하나 퍼즐처럼 이해가 되며 전체적으로 짜맞춰지는 기분입니다. 정말 감사합니다. 어떠한 비싼 수업보다 저에겐 최고의 강의였습니다. 감사합니다. ^^ (DB쪽도 얼른 해주세요 ㅎㅎ 현기증날것같아요 ㅎㅎ 농담입니다-_-;; 감사합니다!!)
              • egoing
                강사메모 : 이 수업을 파일을 이용해서 데이터를 입력하는 수업보다 먼저 만들걸 그랬습니다. app_file.js 파일에는 업로드 수업도 포함되는데 그렇다 보니까 후에 나오는 데이터베이스 수업에 업로드 관련된 예제도 포함되는 결과를 낳았네요. 덕분에 코드가 다소 장황해지는 아쉬움이 있습니다.
              • 최강사
                훌륭한 강의들 너무 잘봤습니다.
                너무 쉽게 설명해 주셔서 뭐 말할게 없네요.

                제 바램하나는 node를 써야 하는 이유? 다른 python, go, php, jsp 등등 서버사이드들이 많은데,..
                어떠한 매력이 있길래 이렇게 폭발적인 반응으로 시장을 선점하고 있는지,..
                왜 이걸 쓰는게 효율적인지 뭐 이런거 있었으면 좋겠어요.
                node의 단점, 단일 쓰레기 기반이라 생기는 문제. 너무 복잡해 지네요. 이러면 기초 수업이 아니겠네요. ^^;

                정말 수고 많으셨습니다.