Sharp Multer를 사용하여 업로드하기 전에 Simple Node JS 이미지 크기 조정

9865 단어 sharpwebdevnodejavascript

동기 부여 :



NodeJS 서버에 이미지를 업로드할 때마다 이미지를 최적화하거나 크기를 조정해야 할 가능성이 많기 때문에 sharp-multer라는 두 작업을 동시에 처리하는 간단한 패키지를 만들었습니다.

소개 :



Multer : Multer는 multipart/form-data를 처리하는 데 사용되는 Express.js 미들웨어로 파일 업로드에 주로 사용되는 라이브러리입니다.
Sharp : Sharp high는 일반적인 형식의 큰 이미지를 더 작고 웹 친화적인 JPEG, PNG, WebP, GIF 및 다양한 크기의 AVIF 이미지로 변환하는 속도 Node.js 모듈입니다.

Sharp-Multer : Sharp를 사용하여 즉석에서 이미지를 최적화하기 위해 스토리지 엔진으로 Multer와 함께 사용하는 Node js 유틸리티 패키지입니다.

설치 및 구성:



1. 노드 JS 앱 만들기

mkdir test-app
cd test-app
npm init


2. 모듈 설치

npm install express multer --save
npm install sharp --save
npm install sharp-multer --save


3. Server.js 파일 생성 및 모듈 가져오기

const express = require("express")
const path = require("path")
const multer = require("multer")
const SharpMulter  =  require("sharp-multer");
const app = express()


4. 이미지를 처리하도록 Sharp Multer 설정
여기에서 Multer용 스토리지 엔진을 생성하고 있습니다.
destination : 이미지를 저장하려는 디렉토리를 반환할 수 있습니다. 디렉토리가 생성되었는지 확인하십시오.
imageOptions : 최적화를 위해 들어오는 이미지를 변환하기 위해 품질 및 파일 형식(jpg,wep,png)뿐만 아니라 크기 조정을 위한 크기 높이, 너비를 전달할 수 있습니다.

const storage =  
 SharpMulter ({
              destination:(req, file, callback) =>callback(null, "images"),
              imageOptions:{
               fileFormat: "jpg",
               quality: 80,
               resize: { width: 500, height: 500 },
                 }
           });
const upload  =  multer({ storage });


5. Multer 미들웨어로 경로 생성

app.post("/upload", upload.single("avatar"), async  (req, res)  => {
console.log(req.file);
return  res.json("File Uploaded Successfully!");
}


6. HTML 파일을 추가하여 양식을 렌더링합니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>File Upload</title>
</head>
<body>
    <div class="container">
        <h1>File Upload</h1>
<!--Create a form to send the file to a route  "upload"-->
<!--Set the request method to POST-->
<!--Set the encytype to "multipart/form-data" in order to send files and not just text-->
        <form action="/upload" method="POST" enctype="multipart/form-data">
            <div class="file-field input-field">
              <div class="btn grey">
                <input type="file" name="avatar">
              </div>
            </div>
            <button class="btn" type="submit">Submit</button>
          </form>
    </div>
</body>
</html>


7. 파일 제공 및 포트 정의

app.get('/', function(req, res) {
  res.sendFile(path.join(__dirname, '/index.html'));
});


app.listen(3000, () => {
  console.log(`Server is running on port ${3000}`)
})


8. 서버 실행

node Server


그런 다음 브라우저를 열고 업로드를 시작하면 이미지가 자동으로 최적화되고 sharp multer 설정 시 정의한 대상에 저장됩니다.

더 많은 고급 옵션 및 워터마크를 확인하려면

읽어주셔서 감사합니다 한번 써보세요😃
Paracetamol.js💊| #179: 자바스크립트 코드 설명
Hilt 종속성 주입을 사용하도록 보기 모델 변환

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage