웹사이트 검색

Multer 및 Express에서 Node.js 백엔드로 이미지를 업로드하는 방법


소개

프런트엔드에 이미지를 업로드할 수 있지만 이를 수신하려면 백엔드에 API 및 데이터베이스를 구현해야 합니다. Node.js 프레임워크인 Express를 사용하면 하나의 설정에서 파일 및 이미지 업로드를 설정할 수 있습니다.

이 기사에서는 Multer 및 Express를 사용하여 Node.js 백엔드로 이미지를 업로드하는 방법을 배웁니다.

전제 조건

  • Node.js에 대한 이해가 권장됩니다. Node.js에 대해 자세히 알아보려면 Node.js로 코딩하는 방법 시리즈를 확인하세요.\n
  • Express의 HTTP 요청 방법에 대한 일반적인 이해가 제안됩니다. HTTP 요청 방법에 대해 자세히 알아보려면 Express 자습서에서 경로 및 HTTP 요청 방법을 정의하는 방법을 확인하십시오.\n

1단계 - 프로젝트 설정

Express는 Node.js 프레임워크이므로 다음 단계를 수행하기 전에 Node.js에서 Node.js를 설치했는지 확인하십시오. 터미널에서 다음을 실행합니다.

프로젝트에 대해 node-multer-express라는 새 디렉터리를 만듭니다.

  1. mkdir node-multer-express

새 디렉터리로 변경합니다.

  1. cd node-multer-express

새 Node.js 프로젝트를 기본값으로 초기화합니다. 여기에는 종속성에 액세스하기 위한 package.json 파일이 포함됩니다.

  1. npm init

항목 파일 index.js를 만듭니다. 여기에서 Express 논리를 처리합니다.

  1. touch index.js

Multer, Express 및 Morgan을 종속 항목으로 설치합니다.

  1. npm install multer express morgan --save

Multer는 이미지 업로드 라이브러리이며 Express 요청에서 양식 데이터 액세스를 관리합니다. Morgan은 네트워크 요청을 로깅하기 위한 Express 미들웨어입니다.

프로젝트에 Multer 적용

Multer 라이브러리를 설정하려면 .diskStorage() 메서드를 사용하여 디스크에 파일을 저장할 위치를 Express에 알려주세요. index.js 파일에서 Multer를 요구하고 storage 변수를 선언하고 해당 값을 .diskStorage() 메서드 호출에 할당합니다.

const multer = require('multer');

const storage = multer.diskStorage({
  destination: function(req, file, callback) {
    callback(null, '/src/my-images');
  },
  filename: function (req, file, callback) {
    callback(null, file.fieldname);
  }
});

diskStorage() 메서드의 destination 속성은 파일을 저장할 디렉토리를 결정합니다. 여기에서 파일은 my-images 디렉토리에 저장됩니다. 대상을 적용하지 않은 경우 운영 체제는 기본적으로 임시 파일용 디렉터리를 지정합니다.

속성 파일 이름은 파일 이름을 지정하는 항목을 나타냅니다. 파일 이름을 설정하지 않으면 Multer는 임의로 생성된 파일 이름을 반환합니다.

참고: Multer는 파일 이름에 확장자를 추가하지 않으며 파일 확장자로 완성된 파일 이름을 반환하는 것이 좋습니다.

Multer 설정이 완료되면 Express 서버 내에서 결합해 보겠습니다.

2단계 - 익스프레스 서버 다루기

Express 서버는 HTTP 요청 메서드, requestresponse 수명 주기 메서드에 대한 논리를 처리하고 파일 및 이미지 전송을 위한 Multer 및 morgan 종속성을 구현할 수 있는 위치입니다. .

index.js 파일에서 app 변수를 선언하고 해당 값을 Express 인스턴스에 할당합니다. Multer 및 morgan에서 Require하고 upload 변수를 선언하여 Multer 인스턴스를 저장합니다.

import morgan from 'morgan';
import express from 'express';
const app = express();
const multer = require('multer');
const upload = multer({dest: 'uploads/'});

app.use(express.json());
app.use(express.urlencoded({extended: true}));
app.use(morgan('dev'));

app.use(express.static(__dirname, 'public'));

Express 미들웨어인 .use()를 작동하여 .json() 미들웨어를 전달하여 수신 응답을 JSON 개체로 구문 분석합니다. 또한 .use()는 morgan의 호출과 dev 인수를 허용합니다. 이는 응답 상태를 알리기 위해 모건의 개발 환경을 사용하도록 Express에 지시합니다. 정적 파일을 생성하려면 Express 미들웨어 .static()에서 .use()로 전송하고 이미지가 포함된 디렉토리를 인수로 정의합니다.

전역 변수를 설정했으면 익명 경로를 허용하는 POST 요청과 새 파일을 수신하기 위한 reqresponse 콜백을 설정합니다. 및 이미지:

app.post('/', upload.single('file'), (req, res) => {
  if (!req.file) {
    console.log("No file received");
    return res.send({
      success: false
    });

  } else {
    console.log('file received');
    return res.send({
      success: true
    })
  }
});

익명 경로가 파일이나 이미지를 수신하면 Multer는 이를 지정된 디렉토리에 저장합니다. POST 요청의 두 번째 인수인 upload.single()필드 이름 속성을 사용하여 파일을 저장하고 Express req.file 개체에 저장합니다. fieldname 속성은 Multer .diskStorage() 메서드에서 정의됩니다.

데이터베이스를 통합해야 하는 경우 index.js 파일에 파일 이름을 요구할 수 있습니다.

const host = req.host;
const filePath = req.protocol + "://" + host + '/' + req.file.path;

변수 filePath를 데이터베이스에 저장하고 들어오는 파일 이름으로 데이터베이스를 작동합니다.

결론

Express는 들어오는 파일과 이미지를 서버에 저장하고 저장하는 프로세스를 제공합니다. 미들웨어 종속성 Multer는 양식 데이터를 간소화하여 여러 파일 업로드를 처리합니다.

Node.js에 대해 자세히 알아보려면 연습 및 프로그래밍 프로젝트에 대한 Node.js 주제 페이지를 살펴보세요.