이미지 올려보자잇

01. 이미지 보내봅시다...

이미지만 남은거로 보인다 그리고 배포..

 

일단 이미지나 기타 동영상 같은거를 백서버에 올릴려면 프론트에서는 Content-Type 속성을 multipart/form-data으로 설정해야한다.

하지만 내가 만든 node 는 현재 

app.use(express.json()) 
app.use(express.urlencoded({
    extended: true
}))

 

보는것과 같이 json으로 오는 데이터와 일반 form데이터만 받을수가 있다... ㅠㅠ 

이것을 해결하기위해 우리는 일단 npm i multer라는 아이를 설치를 한다.

일단은 multer 같은 경우는 app.js에다가 공통으로 넣어둘수도 있지만 보통 각각의 라우터에 넣는게 일반적이라고 한다.

그 이유는 라우터마다 1개의 이미지만 받거나 2개의 이미지 또는 글자를 multipart로 받을수도 있기 때문이라고..

그래서 업로드용 함수를 하나 만드는데 

const upload = multer({
    // 일단 컴퓨터 스토리지에 올림
    storage: multer.diskStorage({
        // 나중에 s3로 변경할 예정
        destination(req,file,done){
            done(null,"uploads")
        },
        // 파일 이름
        filename(req,file,done){
            // 중복되는 파일이름을 곂치지 안게 하기 위해 
            // 업로드 시간을 파일 이름에 붙여서 업로드 시킨다.

            // 확장자 추출 ex) png
            const ext = path.extname(file.originalname)
            // 파일 이름 ex) pg
            const basename = path.basename(file.originalname,ext)
            // 저장시에 pg1234253524.png
            done(null, basename + new Date().getTime() + ext)
        }
    })
    // 최대 20mb
    limits:{fileSize:20 * 1024 * 1024}
})

 

여기서 일단 내가 s3업로드 할 저장소가 없기때문에 컴퓨터 로컬에다가 저장시켯고 나중에 변경할 예정이다.

그리고 중요한점 a가 pg b가 pg 라는 같은 이름의 파일을 올리면 먼저 파일을 올린 사람의 것은 사라지고 나중에 업로드한사람것만 남기 때문이 이를 방지하기 위해서 저장시에 저장한 시간을 이름에 더해서 저장 시킬것이다.

그리고 너무 파일크기가 높으면 서버가 다운될수 잇기 때문에 파일 사이즈를 최대 20mb로 설정해두엇다.

이런거 때문에 라우터 마다 다르게 설정하는거 같다. 

 

그리고 중요한거 지금은 로컬에서 하기때문에 업로드한 이미지를 저장할 폴더가 필요하다.

const fs = require("fs")

try {
    // uploads폴더가 잇는지 확인
    fs.accessSync("uploads")
} catch (error) {
    //없으면 uploads생성

    fs.mkdirSync("uploads")
}

 

 

02. 프론트에 미리보기 이미지 보내보자...

일단 app.js에 app.use("/",express.static(path.join(__dirname,"uploads"))) 를 적어준다.

일단 여기서 path는 운영체제에 따라 파일가져오는 경로가 다른데 그거를 한번에 쓰기 위한거고

그이유는 static인거는 로컬호스트에서 가져오기 때문이다.. ㅠ