찾다

집  >  기사  >  웹 프론트엔드  >  즉시 파일 업로드 및 동적 이미지 처리를 위한 Express 웹 앱 구축

즉시 파일 업로드 및 동적 이미지 처리를 위한 Express 웹 앱 구축

Mary-Kate Olsen
Mary-Kate Olsen원래의
2024-11-12 01:15:02788검색

Building an Express web App for File Uploads and Dynamic Image Processing on the fly

가이드: 파일 업로드 및 동적 이미지 처리를 위한 Express 웹 앱 구축

이 튜토리얼에서는 Express.js를 사용하여 파일 업로드를 처리하고 Sharp.

전제조건

시작하기 전에

Node.js 및 npm이 설치되어 있는지 확인하세요. 이 튜토리얼에서는 다음 라이브러리를 사용합니다:

  1. Express.js - 서버 설정용.
  2. Multer - 파일 업로드를 처리합니다.
  3. 샤프 - 이미지 처리용.
  4. CORS - 교차 출처 요청을 허용합니다.
1단계: 프로젝트 설정

프로젝트를 위한 새 디렉토리를 만드는 것부터 시작하세요.


mkdir image-upload-server
cd image-upload-server
npm init -y
새 프로젝트 폴더가 생성되고 package.json 파일이 초기화됩니다.

다음을 실행하여 모든 종속성을 설치할 수 있습니다.


npm install express multer sharp cors
필요한 디렉토리 생성

두 개의 디렉터리가 필요합니다.

    원본 이미지는 업로드된 원본 이미지를 저장합니다.
    • 변환 이미지를 사용하여 처리된 이미지를 저장합니다.
다음을 실행하여 이러한 디렉터리를 만듭니다.


mkdir original-image transform-image
2단계: Express Server 설정

이제

Express.js를 사용하여 기본 서버를 설정해 보겠습니다. 프로젝트 루트에 index.js라는 파일을 생성하고 다음 코드를 추가하여 서버를 설정하세요. 

const express = require('express');
const cors = require('cors');
const multer = require('multer');
const path = require('path');
const sharp = require('sharp');
const fs = require('fs');

const app = express();

// Middleware for CORS and JSON parsing
app.use(cors());
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
이 기본 설정에는 다음이 포함됩니다.

  • CORS 교차 출처 요청을 허용합니다.
  • express.json() 및 express.urlencoded()를 사용하여 들어오는 요청 데이터를 구문 분석합니다.
3단계: 파일 업로드를 위한 Multer 구성

Multer를 사용하여 파일 업로드를 처리합니다. Multer를 사용하면 업로드된 파일을 지정된 디렉터리에 저장할 수 있습니다.

Multer를 구성하려면 다음 코드를 추가하세요. 

// Configure multer for file storage
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'original-image'); // Ensure the 'original-image' directory exists
  },
  filename: function (req, file, cb) {
    const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9);
    cb(null, file.fieldname + '-' + uniqueSuffix + path.extname(file.originalname));
  }
});

const upload = multer({ storage: storage });
이 설정은 다음을 보장합니다.

    업로드된 파일은 원본이미지 폴더에 저장됩니다.
    • 각 파일은 현재 타임스탬프와 임의의 숫자를 기반으로 고유한 이름을 갖습니다.
4단계: 파일 업로드 엔드포인트 생성

다음으로 파일 업로드를 위한

POST 엔드포인트를 만듭니다. 사용자는 서버에 파일을 보내고 서버는 해당 파일을 원본 이미지 디렉터리에 저장합니다.

파일 업로드를 처리하려면 다음 코드를 추가하세요.


// File upload endpoint
app.post('/upload', upload.single('file'), (req, res) => {
  const file = req.file;
  if (!file) {
    return res.status(400).send({ message: 'Please select a file.' });
  }
  const url = `http://localhost:3000/${file.filename}`;

  // Store file path with original filename as the key
  db.set(file.filename, file.path);

  res.json({
    message: 'File uploaded successfully.',
    url: url
  });
});
이 엔드포인트는 다음을 수행합니다.

  • 단일 파일 업로드를 수신합니다(필드 이름 파일 포함).
  • 업로드된 파일의 URL을 반환합니다.

5단계: 업로드된 파일 제공

이제 업로드된 파일을 제공하기 위한 GET 엔드포인트를 만들어 보겠습니다. 쿼리 매개변수(예: 크기 조정, 형식 변환)가 제공되면 서버는 이에 따라 이미지를 처리합니다.

업로드된 파일을 제공하려면 다음 코드를 추가하세요.

mkdir image-upload-server
cd image-upload-server
npm init -y

이 끝점:

  • 파일명을 기준으로 db map에서 파일을 검색합니다.
  • 크기 조정, 형식 변환 또는 품질 조정이 지정된 경우 이미지를 처리합니다.
  • 성능 향상을 위해 처리된 이미지를 캐시합니다.

6단계: Sharp를 사용하여 이미지 처리

Sharp 라이브러리를 사용하면 크기 조정, 형식 변환, 품질 조정 등 이미지에 대한 다양한 변환을 수행할 수 있습니다.

이러한 변환을 처리하는 processImage 함수를 추가하세요.

npm install express multer sharp cors

이 기능:

  • h(높이) 및 w(너비) 매개변수를 기반으로 이미지 크기를 조정합니다.
  • f 매개변수(JPEG, PNG, WebP 등)를 기반으로 이미지 형식을 변환합니다.
  • q 매개변수에 따라 이미지 품질을 조정합니다(선택 사항).
  • 처리된 이미지를 변환 이미지 폴더에 저장합니다.

7단계: 서버 시작

마지막으로 다음 코드를 추가하여 서버를 시작합니다.

mkdir original-image transform-image

이렇게 하면 포트 3000에서 서버가 시작됩니다.

8단계: 서버 테스트

1. Postman으로 파일 업로드 테스트

Postman을 사용하여 파일 업로드 기능을 테스트하려면 다음 단계를 따르세요.

1.1 우편배달부 열기

컴퓨터에서 Postman을 실행하세요. Postman이 설치되어 있지 않은 경우 여기에서 다운로드할 수 있습니다.

1.2 POST 요청 생성

  • 요청 유형을 POST로 설정하세요.
  • URL 필드에 http://localhost:3000/upload를 입력합니다.

1.3 본문에 파일 추가

  • 본문 탭을 선택하세요.
  • 양식 데이터 옵션을 선택하세요.
  • 양식에서 키를 file으로 설정합니다(이는 멀티터 구성의 필드 이름과 일치해야 합니다).
  • 파일 선택 버튼을 클릭하고 컴퓨터에서 이미지 파일을 선택하세요.

1.4 요청 보내기

  • 보내기를 클릭하세요.
  • 업로드가 성공하면 업로드된 이미지의 URL이 포함된 응답을 받게 됩니다.

답변 예시:

mkdir image-upload-server
cd image-upload-server
npm init -y

2. 브라우저를 통한 이미지 검색 및 처리 테스트

이제 브라우저를 사용하여 변환된 이미지를 검색해 보겠습니다.

2.1 업로드된 이미지 가져오기

이미지를 검색하려면 브라우저를 열고 파일을 업로드한 후 받은 URL로 이동하세요. 예를 들어 응답 URL이 다음과 같은 경우:

npm install express multer sharp cors

브라우저의 주소 표시줄에 이 URL을 입력하고 Enter를 누르세요. 원본 이미지가 표시됩니다.

3. 쿼리 매개변수를 사용하여 이미지 변환 테스트

이제 크기 조정, 형식 변환, 품질 조정을 위한 쿼리 매개변수를 추가하여 동적 이미지 변환을 테스트해 보겠습니다.

3.1 변환을 위한 쿼리 매개변수 추가

브라우저에서 쿼리 매개변수를 이미지 URL에 추가하여 변환을 테스트하세요. 다음은 몇 가지 예입니다.

  • 이미지 크기를 너비 200px, 높이 300px로 조정: 
mkdir original-image transform-image
  • 이미지를 PNG 형식으로 변환: 
const express = require('express');
const cors = require('cors');
const multer = require('multer');
const path = require('path');
const sharp = require('sharp');
const fs = require('fs');

const app = express();

// Middleware for CORS and JSON parsing
app.use(cors());
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
  • 이미지를 90% 품질의 WebP 형식으로 변환: 
// Configure multer for file storage
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'original-image'); // Ensure the 'original-image' directory exists
  },
  filename: function (req, file, cb) {
    const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9);
    cb(null, file.fieldname + '-' + uniqueSuffix + path.extname(file.originalname));
  }
});

const upload = multer({ storage: storage });
  • 이미지 크기를 너비 400px, 높이 500px로 조정하고 80% 품질의 JPEG로 변환: 
// File upload endpoint
app.post('/upload', upload.single('file'), (req, res) => {
  const file = req.file;
  if (!file) {
    return res.status(400).send({ message: 'Please select a file.' });
  }
  const url = `http://localhost:3000/${file.filename}`;

  // Store file path with original filename as the key
  db.set(file.filename, file.path);

  res.json({
    message: 'File uploaded successfully.',
    url: url
  });
});

3.2 예상되는 동작

  • 쿼리 매개변수를 사용하여 URL에 액세스하면 서버가 이에 따라 이미지를 처리합니다.
    • 이미지가 이전에 동일한 매개변수로 처리된 경우 캐시된 버전이 제공됩니다.
    • 아직 처리되지 않은 경우 이미지를 처리(크기 조정, 형식 변환, 품질 조정)하고 향후 요청을 위해 변환 이미지 폴더에 저장합니다.

브라우저에 처리된 이미지가 표시되며 변환이 올바르게 적용되었는지 확인할 수 있습니다.

예시 워크플로

  1. Postman을 통해 이미지를 업로드하세요.
  2. Postman에서 제공한 URL을 사용하여 브라우저에서 업로드된 이미지를 검색합니다.
  3. URL을 수정하여 브라우저에서 ?h=300&w=200과 같은 쿼리 매개변수를 추가하여 크기 조정이 작동하는지 확인하거나 ?f=webp&q=90 형식 변환을 확인하세요.

결론

이 이미지 업로드 및 처리 서버는 이미지 업로드, 변환 및 검색을 처리하기 위한 강력한 솔루션을 제공합니다. 파일 처리에는 Multer를, 이미지 처리에는 Sharp를 사용하여 쿼리 매개변수를 통한 크기 조정, 형식 변환 및 품질 조정을 지원합니다. 시스템은 처리된 이미지를 효율적으로 캐시하여 성능을 최적화하고 신속하고 반응성이 뛰어난 이미지 전달을 보장합니다. 이 접근 방식은 동적 이미지 변환이 필요한 애플리케이션의 이미지 관리를 단순화하여 개발자를 위한 다용도 도구로 만듭니다.

위 내용은 즉시 파일 업로드 및 동적 이미지 처리를 위한 Express 웹 앱 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

json postman npm express if for select format timestamp Directory using finally append map JS number function this display transform web app http Access
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：다른 하위 도메인에 있는 iframe에서 상위 URL에 어떻게 액세스할 수 있나요?다음 기사：다른 하위 도메인에 있는 iframe에서 상위 URL에 어떻게 액세스할 수 있나요?

관련 기사

더보기