분류 Nodejs

NodeJS + Multer를 사용하여 파일 업로드

컨텐츠 정보

  • 조회 47 (작성일 )

본문

Multer를 사용하여 NodeJS 애플리케이션에서 파일을 업로드하는 방법을 배우십시오. Multer는 양식으로 파일을 보내는 데 사용되는 다중 파트 / 양식 데이터를 처리하기 위한 미들웨어입니다.


https://www.loginradius.com/engineering/blog/upload-files-with-node-and-multer/


소개 


API를 빌드 할 때 이미지, 텍스트 문서, 스크립트, pdf 등 파일을 업로드해야 합니다. 이 기능을 개발할 때 파일 수, 유효한 파일 유형, 이러한 파일의 크기 및 기타 여러 문제와 같은 몇 가지 문제가 발견 될 수 있습니다. 그리고 이러한 문제로부터 우리를 구하기 위해 Multer 라이브러리가 있습니다. Multer는 양식으로 파일을 보내는 데 사용되는 multipart / form-data를 처리하기 위한 node.js 미들웨어입니다.


첫 번째 단계 


첫 번째 단계는 컴퓨터에 NodeJS 프로젝트를 만드는 것입니다.


Express 추가 


터미널에 다음 명령을 입력하십시오.


yarn add express

* 설치시 NPM을 사용할 수도 있습니다.


src/ 폴더 안에 app.js라는 파일을 만듭니다. 다음 단계는 app.js에서 Express 서버를 시작하는 것입니다.


const express = require("express")
const app = express()

app.listen(3000 || process.env.PORT, () => {
  console.log("Server on...")
})

Multer 추가 


프로젝트를 만들고 구성하고 Express를 설치하면 프로젝트에 멀터를 추가합니다.


yarn add multer

다음 단계는 멀터를 app.js 파일로 가져 오는 것입니다.


const multer = require("multer")

거의 다 왔습니다. 이제 업로드 된 파일을 저장할 uploads라는 폴더를 만듭니다.


업로드 구성 및 유효성 검사 


이제 우리는 diskStorage의 구성 인 매우 중요한 단계에 있습니다. DiskStorage는 multer에서 사용할 수 있는 방법으로 파일의 대상, 파일 이름을 구성하고 파일 유형에 대한 유효성 검사를 추가 할 수도 있습니다. 이러한 설정은 프로젝트의 필요에 따라 다릅니다. 아래에 구성의 기본 예를 남겨 드리겠습니다.


const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, "uploads/")
  },
  filename: (req, file, cb) => {
    cb(null, Date.now() + "-" + file.originalname)
  },
})

위의 구성에서 업로드 된 파일의 대상을 언급하고 파일 이름도 변경했습니다.


업로드 경로 제공 


const uploadStorage = multer({ storage: storage })

// Single file
app.post("/upload/single", uploadStorage.single("file"), (req, res) => {
  console.log(req.file)
  return res.send("Single file")
})

//Multiple files
app.post("/upload/multiple", uploadStorage.array("file", 10), (req, res) => {
  console.log(req.files)
  return res.send("Multiple files")
})

위의 코드 스 니펫에서 파일 전송을 위한 2 개의 POST 경로를 만들었습니다. 첫 번째 / upload / single 경로는 단일 파일 만 수신합니다. uploadStorage 변수는 diskStorage 설정을 수신합니다. 경로의 미들웨어로서 단일 파일 업로드를 위한 단일 메소드를 호출합니다. / upload / multiple 경로는 여러 파일을 수신하지만 최대 파일 수는 10 개이므로 uploadStorage 변수는 이제 여러 파일을 업로드하기 위해 ʻarray` 메소드를 호출합니다.


 


모든 설정이 완료되면 우리의 작은 API는 이미 전송 된 파일을 저장할 수 있습니다.


const express = require("express")
const multer = require("multer")

const app = express()

const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, "uploads/")
  },
  filename: (req, file, cb) => {
    cb(null, Date.now() + "-" + file.originalname)
  },
})

const uploadStorage = multer({ storage: storage })

// Single file
app.post("/upload/single", uploadStorage.single("file"), (req, res) => {
  console.log(req.file)
  return res.send("Single file")
})
//Multiple files
app.post("/upload/multiple", uploadStorage.array("file", 10), (req, res) => {
  console.log(req.files)
  return res.send("Multiple files")
})

app.listen(3000 || process.env.PORT, () => {
  console.log("Server on...")
})