multer 관련 질문

[배희창]

주말 잘보내십쇼 선생님. 아마 포트폴리오 프로젝트 마지막 질문일거같습니다..

이미지 파일 포함 게시물 수정 관련 질문입니다.

이미지를 포함한 게시물 수정시 사용자는
  1. 기존 이미지 파일은 그대로 사용하고, 제목이나 내용, 카테고리 등을 수정한다

  2. 이미지 파일이 마음에 안들어서 다른걸로 갈아끼운다

  3. 둘 다 같이한다

정도의 선택지가 있잖아요?

그래서 제가 생각 한 코드 돌아가는 방식은

app.post('/modify', upload.array('filename', 20), (req, res) => {
  if(사용자가 이미지파일 정보를 주지 않았다면){

    요청시 건내준 id값에 해당하는 내용을 db에서 업데이트

  } else if(사용자가 이미지 파일을 첨부했다면) {

    1. 기존 이미지 삭제
    2. 요청시 건내준 id값에 해당하는 내용을 db에서 업데이트

  }
}

위와 같은 코드를 돌리면 아주 잘 돌아갑니다.

근데 이제 문제점이 저 미들웨어로 작동하는 upload.single 혹은 upload.array인데

만약에 제 /public/image 폴더에 훔바.jpg 라는 파일이 존재하는데,

이미지를 갈아치우려고 업로드 할때
기존 파일 이름과 같은 훔바.jpg를 업로드하면

서버가 업데이트를 생략하고, 파일 삭제만 시켜버립니다. ( 제 생각엔 이름이 겹처서 이미 있다 판단하고 업로드를 생략하는느낌?)

그래서 지금 돌아가는게 아마
 
 1. 새 이미지 등록(미들웨어 먼저 실행)
 2. 기존 이미지 삭제
 3. 요청시 건내준 id값에 해당하는 내용을 db에서 업데이트

일텐데 이 미들웨어를

1. 기존 이미지 삭제
2. 새 이미지 등록
3. 업데이트

로 변경하려면 어떤 꿀팁이 있을까요...? 저 미들웨어 부분을 파일삭제 코드 밑에 끌어내리면 될까 해봤는데 실패.....

아니면 제 코드 순서가 틀린것일까요...?

[codingapple]

파일저장시 파일이름에 유저이름이나 날짜를 강제로 섞어버리면 쉽게 해결될듯요

[배희창]

으음... 선생님 그 업데이트 코드 순서가 에러난거같습니다. 콘솔로 찍어보면

// 게시물 수정 요청
app.post('/modify', upload.array('filename', 20), (req, res) => {

  req.body.id = parseInt(req.body.id);

  생략 정상작동

  // 이미지 제외 수정
  } else if (req.body.filename == (null || "")) {

    생략 정상작동
  } else {
    db.collection('post').findOne({ _id: req.body.id }, (error, result) => {
      var imageData = result.src;
      try {     
        fs.unlinkSync(`./public/image/${imageData}`);
        console.log('기존파일삭제'+imageData);      
      }
      catch (error) {
        res.send('해당 파일이 존재하지 않습니다.');
      }
    });

    db.collection('post').findOne({ _id: req.body.id }, (error, result) => {
      
      if (error) { return res.send(error) }
      
      if (typeof result.src == 'string') {
              
        db.collection('post').updateOne({ _id: req.body.id }, { $set: { category: req.body.category, font: req.body.font, title: req.body.title, src: now + req.body.filename } }, (error, result) => {
          if (error) { return res.send(error) };
          console.log(now + req.body.filename + "db업뎃");
          res.send(`<script type="text/javascript">alert("수정 완료"); history.go(-1);</script>`);
        })
      }
    })
  }

})

이러면

기존파일삭제1669025560372kkkkk.jpg
1669025560372kkkkk.jpgdb업뎃

db에 src 업데이트를 먼저 시켜버리네요... 아니면 덮어씌워버리는건지...
상단에 삭제코드를 먼저썼는데도 ㅠㅠ
뭔가 해답이 있을까요...? 혹시몰라 멀터 코드도 첨부합니다

var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, './public/image')
  },
  filename: function (req, file, cb) {
    cb(null, now + (file.originalname = Buffer.from(file.originalname, 'latin1').toString('utf8')))
  }
});

var upload = multer({
  storage: storage,
  fileFilter: (req, file, callback) => {
    var ext = path.extname(now + file.originalname);
    if (ext !== '.png' && ext !== '.jpg' && ext !== '.jpeg' && ext !== '.PNG' && ext !== '.JPG' && ext !== '.JPEG') {
      return callback(new Error('PNG, JPG, JPEG만 업로드하세요'))
    }
    callback(null, true)
  },
  limits: {
    fileSize: 1024 * 1024 * 50
  }
});

[codingapple]

두번째  db.collection('post').findOne()을 
첫째  db.collection('post').findOne() 콜백함수안에 넣거나 합시다 

[배희창]

홀리몰리 덕분에 완성했습니다 선생님 ㅠㅠㅠㅠㅠ
이제 남은 버그가 그..
파일명에 밀리초 + 파일명 해서 업로드하는데

훔바.jpg를 1번게시물 제목 1 해서 올리고?
훔바.jpg를 2번게시물 제목 2 해서 연속으로 똑같은 파일을 올리면

일정 시간이 지나지 않으면 getTime()이 똑같은 값을 지정합니다.
이거는 Date()의 버그인가요..? 아니면 1분 내에 똑같은 파일을 사용 못하게 제가 막는 코드를 써야할까요??

쪼끔 지나고나서 올리면 파일명 앞의 밀리초가 바뀌긴 하는데, 금방 올려버리면 같은값을 공유합니다..

요건 어떤 팁이 있을까요?

[codingapple]

크롬에서 연속으로 똑같은 파일명 올리면 안올라가는 버그가 있는데
그래서 이전에 올린 파일 그대로 사용해주는걸수도 있습니다

[글쓴이]

글