Server Side JavaScript

파일 업로드

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

파일 업로드 준비

파일 업로드 양식(form)

 

multer 소개

multer 사용법 예제

multer 심화

multer 심화 예제

댓글

댓글 본문
작성자
비밀번호
  1. 오타있습니다.
    파일 업로드 양식(form)을 만들때 chartset이 아니라 charset입니다.
    그리고 콘솔에 파일 오브젝트는 찍히는데 저장이 안되는경우는 multer의 dest 경로를 수정해보세요.
    저의 경우는 dest: '../uploads/'로 변경했더니 저장이 잘됩니다.
    ( ..은 상위폴더를 의미합니다. )
  2. chozza
    req.file 로 찍으면 undefined 가 나오고 req.files로 찍으면 나옵니다. 그리고 폼태그 전송후 스토리지ㅣ에 지정해준 디렉토리에 파일이 저장되있지않습니다.. 에러가 찍히는것도아니고 디버깅을 어떻게 해야 할까요?
  3. Seo Yun Seok Tudoistube
    호스팅에 올렸을때 파일업로드할때 경로명을 어떻게 해야 할지 궁금합니다.
    전에 스프링공부해서 템플릿프로젝트 만들어서 호스팅에 올렸는데, 파일업로드는 구현을 못했거든요.
    제 노트북에서 파일을 업로드해서 서버쪽의 디렉토리에 어떻게 넣을지 모르겠더라구요.
    이번에 Node.js 공부하고 호스팅에 올리면 꼭 파일업로드를 구현하려고 합니다.
    감사합니다^_____^!!!
  4. 신입1
    감사합니다.
  5. 1234123
    컹스.. 마지막에 user가 왜안된다냐
  6. 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);
    }
    });
    }
    });

    이상하거나 더 좋은 방법이 있으면 댓글로 피드백 부탁드려요~
  7. beginner
    너무 감사히 잘 배우고 있습니다 :)
  8. 아마도 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

      자꾸 이런식으로 뜨는데... 이게 문제가 뭐죠
    • 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의 단점, 단일 쓰레기 기반이라 생기는 문제. 너무 복잡해 지네요. 이러면 기초 수업이 아니겠네요. ^^;

            정말 수고 많으셨습니다.
          버전 관리
          egoing
          현재 버전
          선택 버전
          graphittie 자세히 보기