express_multer_확장자설정

결론

const storage = multer.diskStorage({
  destination:(req,file,cb)=>{
    cb(null,"uploads/videos/")
    // 이 경로로 저장=> 작업영역/uploads/videos/ 
  },
  filename:(req,file,cb)=>{
    cb(null,req.session.uniqueId+"_"+Date.now()+".mp4
    // 저장방식=> id_현재시간.mp4 형식
  }
})

const uploadVideo = multer({storege, limit:{fileSize: n,}})

문제파악

기존에는 multer.diskStorage 를 사용하지 않았다. 그래서 파일이 저장될때 아무런 확장자가 없이 저장이 됐었다! (예 : 23543463463243325)

사실 데스크탑 환경에서는 이상 없었다..
문제는 mac safari, iphone safari+chrome 에서 video 를 불러들일 수 없었다! ( 그놈의 IOS... )

문제의 원인을 파악하려고 여러 시도를 해본 결과, mac safari 에서 확장자가 data 형식을 읽을수 없다는 것을 알게 되었다.
개발자 도구를 이용하여 원본(확장자가.mp4)을 해당 경로에 저장한 후에, video의 src 를 해당경로의 파일로 적용했더니 된다!!

그럼 문제는 알았음! 확장자를 붙여주면 되는것!
그리하여 upload 될때 확장자를 변경할 수 있는 방법을 npm-multer 공식문서에서 찾았다.
-disk.storage 안에 여러 옵션을 지정해줄 수 있는데, filename 을 통해 "아무개.mp4" 라고 옵션을 지정한 후에 multer({storage}) 로 실행시키면 아무개mp4파일로 저장이 되는 것을 볼 수 있었다.!!!!

맨 위에 써놓은 코드처럼 해본 결과 ios 에서도 잘 출력이 된다!!

문제해결

multer() 만 쓰게 된다면 파일의 확장자가 없이 data형식으로 저장되는데, 이것이 windows 브라우저들에서는 문제없이 읽어낼 수 있다. 하지만 ios 브라우저에서는 이 타입을 읽어낼 수 없으므로 multer 가 파일을 저장할때 확장자를 포함한 filename 으로 저장해줘야 한다.

사용자가 mp4 파일말고 다른 유형의 파일을 업로드하려고 시도할때 아래 switch 를 이용하여 확장자들의 case 를 정해준 후 mimeType 을 콜백 맨 뒤에 포함시켜주면 끝!!!

const storage = multer.diskStorage({
	destinations: (req,file,콜백)=>{
    	콜백(null,"경로'
    },
    filename:(req,file,콜백)=>{
    	let mineType ;
        switch (file.mimetype) {
          case "video/mp4":
            mimeType = "mp4";
          break;
          case "video/avi":
            mimeType = "png";
          break;
          case "video/mov":
            mimeType = "mov";
          break;
          case "video/wmv":
            mimeType = "wmv";
          break;
          default:
            mimeType = "mp4";
          break;
     }
     콜백(null,"파일이름"+"_"+"."+mimeType
    })
 
 export upload = multer({storage})