이 튜토리얼에서는 Express.js를 사용하여 파일 업로드를 처리하고 Sharp.
전제조건Node.js 및 npm이 설치되어 있는지 확인하세요. 이 튜토리얼에서는 다음 라이브러리를 사용합니다:
mkdir image-upload-server cd image-upload-server npm init -y
다음을 실행하여 모든 종속성을 설치할 수 있습니다.
npm install express multer sharp cors
mkdir original-image transform-image
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 }));
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 });
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
});
});
이제 업로드된 파일을 제공하기 위한 GET 엔드포인트를 만들어 보겠습니다. 쿼리 매개변수(예: 크기 조정, 형식 변환)가 제공되면 서버는 이에 따라 이미지를 처리합니다.
업로드된 파일을 제공하려면 다음 코드를 추가하세요.
mkdir image-upload-server cd image-upload-server npm init -y
이 끝점:
Sharp 라이브러리를 사용하면 크기 조정, 형식 변환, 품질 조정 등 이미지에 대한 다양한 변환을 수행할 수 있습니다.
이러한 변환을 처리하는 processImage 함수를 추가하세요.
npm install express multer sharp cors
이 기능:
마지막으로 다음 코드를 추가하여 서버를 시작합니다.
mkdir original-image transform-image
이렇게 하면 포트 3000에서 서버가 시작됩니다.
Postman을 사용하여 파일 업로드 기능을 테스트하려면 다음 단계를 따르세요.
컴퓨터에서 Postman을 실행하세요. Postman이 설치되어 있지 않은 경우 여기에서 다운로드할 수 있습니다.
답변 예시:
mkdir image-upload-server cd image-upload-server npm init -y
이제 브라우저를 사용하여 변환된 이미지를 검색해 보겠습니다.
이미지를 검색하려면 브라우저를 열고 파일을 업로드한 후 받은 URL로 이동하세요. 예를 들어 응답 URL이 다음과 같은 경우:
npm install express multer sharp cors
브라우저의 주소 표시줄에 이 URL을 입력하고 Enter를 누르세요. 원본 이미지가 표시됩니다.
이제 크기 조정, 형식 변환, 품질 조정을 위한 쿼리 매개변수를 추가하여 동적 이미지 변환을 테스트해 보겠습니다.
브라우저에서 쿼리 매개변수를 이미지 URL에 추가하여 변환을 테스트하세요. 다음은 몇 가지 예입니다.
mkdir original-image transform-image
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 }));
// 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 });
// 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
});
});
브라우저에 처리된 이미지가 표시되며 변환이 올바르게 적용되었는지 확인할 수 있습니다.
이 이미지 업로드 및 처리 서버는 이미지 업로드, 변환 및 검색을 처리하기 위한 강력한 솔루션을 제공합니다. 파일 처리에는 Multer를, 이미지 처리에는 Sharp를 사용하여 쿼리 매개변수를 통한 크기 조정, 형식 변환 및 품질 조정을 지원합니다. 시스템은 처리된 이미지를 효율적으로 캐시하여 성능을 최적화하고 신속하고 반응성이 뛰어난 이미지 전달을 보장합니다. 이 접근 방식은 동적 이미지 변환이 필요한 애플리케이션의 이미지 관리를 단순화하여 개발자를 위한 다용도 도구로 만듭니다.
위 내용은 즉시 파일 업로드 및 동적 이미지 처리를 위한 Express 웹 앱 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
