2022-12-20 업로드 관련 오류들

업로드관련
사용자아이디 + 확장자는 파일이름이 겹칠일이 생긴다.
같은이름이면 네트워크에서 애초이 2번째를 읽지 않는다
기존 사진일것이다.

그럴 경우 네트워크에 disable cache
캐시 비활성화를 체크해주면 보인다.

코드에도 캐쉬가 안보이도록 저장해야 할 것이다.
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">


1.  파일 업로드
요청
            var form = document.getElementById('profile_info');
            var formData = new FormData(form);
            axios({
            method : 'post',
            url : '/upload_file',
            data :  formData,
            headers : {
                'Content-Type': 'multipart/form-data'
            }
        })

서버 라우트 정의하는 곳
multer관련 모듈 여기서 정의
const multer = require('multer');
const path = require('path');
const fs = require('fs')

const upload = multer({
   storage: multer.diskStorage({
     destination: function (req, file, cb) {
       cb(null, 'static/uploads/');
     },
     filename: function (req, file, cb) {
       const ext = path.extname(file.originalname);
       cb(null, req.session.user + ext);
     }
   })
});

url과 req,res 함수 사이에 미들웨어를 했었는데, 구조는 같다.
router.post('/upload_file', upload.single('img'),controller.upload_file);

콘트롤러 부분에서는
내가 e_mail을 새로 생성한다고 생각했는데, 그것이 틀렸다.
( 이것 때매 계속 user.id user.pw가 읽을 수 없다 유효성이 어쩌구 떳는데 ㅠㅠ )
update를 하는 것이다.
  
#req.file.filename / req.body가 아닌 req.file로 받습니다.
User.update({
        user_img : req.file.filename
     },
     { where :  { id : `${req.session.user}` } }
     );
     res.send({ path : req.file.filename });
     };


2.  파일명 변경 -> 사용자아이디.확장자

path는 파일경로를 읽는다
path.extname => 확장자를 읽는다
req.session.user + ext => 유저의 고유 세션아이디 + 확장자로 파일이름을 지정합니다

const ext = path.extname(file.originalname);
       cb(null, req.session.user + ext);

3.  파일명 db에 추가 ( 로그인한 user의 정보를 update )
User.update({
        user_img : req.file.filename
     },
     { where :  { id : `${req.session.user}` } }
     );
     res.send({ path : req.file.filename });
     };

 

//ejs 파일
캐쉬죽이는 법
 <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">

<script>
    $('#upload_file').on('click', function(){
        $('#userfile').trigger('click');

        $('#userfile').change(function(){
            var form = document.getElementById('profile_info');
            var formData = new FormData(form);

            console.log('요청은 가는데 :');
            axios({
            method : 'post',
            url : '/upload_file',
            data :  formData,
            headers : {
                'Content-Type': 'multipart/form-data'
            }
        })
        //무조건 data로 받는다.
        .then((a) => { return a.data ; })
        //이미지경로 + path(req.file.filename)
        .then((reuslt) => {
            document.querySelector('img').src = "static/uploads/" + reuslt.path;
        });
      });
            
     });

</script>

//routes

const multer = require('multer');
const path = require('path');
const fs = require('fs')

const upload = multer({
  storage: multer.diskStorage({
    destination: function (req, file, cb) {
      cb(null, 'static/uploads/');
    },
    filename: function (req, file, cb) {
      const ext = path.extname(file.originalname);
      cb(null, req.session.user + ext);
    }
  })
});

router.get('/mypage', controller.mypage);
router.post('/upload_file', upload.single('img'), controller.upload_file);

//controller
exports.upload_file = (req, res) => {
    console.log(req.file);
    User.update({
        user_img : req.file.filename
    },
    { where :  { id : `${req.session.user}` } }
    );
    res.send({ path : req.file.filename });
    };