Express Multer 미들웨어로 파일 업로드 처리

8516 단어 programmingjavascriptwebdevnode
https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62에서 Amazon에서 내 책을 확인하십시오.

지금 http://jauyeung.net/subscribe/에서 내 이메일 목록을 구독하십시오.

Multer는 Express 앱으로 파일 업로드를 처리할 수 있는 미들웨어입니다.

이 기사에서는 업로드를 처리하고 멀티파트 형식의 텍스트 데이터를 처리하는 데 사용하는 방법을 살펴보겠습니다.

사용 방법?



다음을 실행하여 설치할 수 있습니다.

npm install --save multer


일단 설치되면 인코딩 유형이 multipart/form-data 인 양식을 만들어야 합니다.

멀티파트가 아닌 양식은 처리하지 않습니다. 즉, enctype 가 multipart/form-data 로 설정되어 있습니다.

간단한 사용법



가장 간단한 사용법은 한 번에 하나의 파일 업로드를 허용하는 것입니다. multer 함수를 호출하고 업로드된 파일을 저장할 경로를 다음과 같이 설정하면 됩니다.

const express = require('express');  
const bodyParser = require('body-parser');  
const multer = require('multer');  
const upload = multer({ dest: './uploads/' });  
const app = express();
app.use(bodyParser.json());  
app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static('public'));
app.get('/', (req, res) => {  
  res.sendFile('public/index.html');  
});
app.post('/upload', upload.single('upload'), (req, res) => {  
  res.send('file uploaded')  
});
app.listen(3000, () => console.log('server started'));


그런 다음 index.html 폴더에 public를 만들고 다음을 추가할 수 있습니다.

<!DOCTYPE html>  
<html>
<head>  
  <meta charset="utf-8">  
  <meta name="viewport" content="width=device-width">  
  <title>Upload</title>  
  <link href="style.css" rel="stylesheet" type="text/css" />  
</head>
<body>  
  <form action="/upload" method="post" enctype="multipart/form-data">  
    <input type="file" name="upload" />      
    <input type='submit' value='Upload'>  
  </form>  
</body>
</html>

index.html에 대한 코드는 양식이 다중 파트 양식 데이터를 제출하도록 합니다.

또한 name 속성의 값은 upload.single() 메서드에 전달된 이름 문자열과 일치해야 합니다.

파일이 업로드되면 업로드된 파일 이름에 대해 임의의 ID가 생성됩니다.
req.files에는 파일 개체가 있고 req.body에는 텍스트 필드 값이 있습니다.

여러 파일 업로드



다음과 같이 upload.array 메서드를 사용하여 여러 파일의 업로드를 처리할 수도 있습니다.

const express = require('express');  
const bodyParser = require('body-parser');  
const multer = require('multer');  
const upload = multer({ dest: './uploads/' });  
const app = express();
app.use(bodyParser.json());  
app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static('public'));
app.get('/', (req, res) => {  
  res.sendFile('public/index.html');  
});
app.post('/upload', upload.array('uploads', 5), (req, res) => {  
  res.send('files uploaded')  
});
app.listen(3000, () => console.log('server started'));


그런 다음 index.html를 다음과 같이 변경해야 합니다.

<!DOCTYPE html>  
<html>
<head>  
  <meta charset="utf-8">  
  <meta name="viewport" content="width=device-width">  
  <title>Upload</title>  
  <link href="style.css" rel="stylesheet" type="text/css" />  
</head>
<body>  
  <form action="/upload" method="post" enctype="multipart/form-data">  
    <input type="file" name="uploads" multiple />  
    <input type='submit' value='Upload'>  
  </form>  
</body>
</html>

multiple 메서드를 사용하는 것 외에도 여러 업로드를 활성화하기 위해 upload.array 속성을 양식에 추가합니다.
5 호출의 두 번째 인수에서 upload.array는 업로드할 수 있는 최대 파일 수입니다.

파일이 업로드되면 업로드된 파일 이름에 대해 임의의 ID가 생성됩니다.

여러 파일 필드



다음과 같이 여러 파일을 업로드할 수 있습니다.

const express = require('express');  
const bodyParser = require('body-parser');  
const multer = require('multer');  
const upload = multer({ dest: './uploads/' });  
const app = express();
app.use(bodyParser.json());  
app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static('public'));
app.get('/', (req, res) => {  
  res.sendFile('public/index.html');  
});
const multiUpload = upload.fields([  
  { name: 'photos', maxCount: 3 },  
  { name: 'texts', maxCount: 5 }  
])  
app.post('/upload', multiUpload, (req, res) => {  
  console.log(req.files);  
  res.send('files uploaded');  
});
app.listen(3000, () => console.log('server started'));


그런 다음 public/index.html에 다음이 있을 때:

<!DOCTYPE html>  
<html><head>  
  <meta charset="utf-8">  
  <meta name="viewport" content="width=device-width">  
  <title>Upload</title>  
  <link href="style.css" rel="stylesheet" type="text/css" />  
</head><body>  
  <form action="/upload" method="post" enctype="multipart/form-data">  
    <label>Photos</label>  
    <br>  
    <input type="file" name="photos" multiple />  
    <br>  
    <label>Texts</label>  
    <br>  
    <input type="file" name="texts" multiple />  
    <br>  
    <input type='submit' value='Upload'>  
  </form>  
</body></html>


파일을 선택하고 제출한 후 업로드된 파일을 받습니다. 코드:

const multiUpload = upload.fields([  
  { name: 'photos', maxCount: 3 },  
  { name: 'texts', maxCount: 5 }  
])


필드photos 및 texts에서 파일을 가져오고 각각 3개 및 5개 파일에 업로드합니다.
console.log 에서 우리가 업로드한 POST /upload 경로의 파일을 볼 수 있습니다.

아무것도 업로드하지 않음



업로드 파일 처리를 건너뛰려면 다음과 같이 upload.none() 메서드를 사용할 수 있습니다.

const express = require('express');  
const bodyParser = require('body-parser');  
const multer = require('multer');  
const upload = multer();  
const app = express();
app.use(bodyParser.json());  
app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static('public'));
app.get('/', (req, res) => {  
  res.sendFile('public/index.html');  
});
app.post('/submit', upload.none(), (req, res) => {  
  res.send(req.body)  
});
app.listen(3000, () => console.log('server started'));


그런 다음 public/index.html에 대해 다음이 있을 때:

<!DOCTYPE html>  
<html><head>  
  <meta charset="utf-8">  
  <meta name="viewport" content="width=device-width">  
  <title>Upload</title>  
  <link href="style.css" rel="stylesheet" type="text/css" />  
</head><body>  
  <form action="/submit" method="post" enctype="multipart/form-data">  
    <input type="text" name="name" />      
    <input type='submit' value='Submit'>  
  </form>  
</body></html>


무언가를 입력하고 제출을 클릭한 후 응답에서 볼 수 있듯이 제출된 POST 본문을 req.body에 얻습니다.

결론



Multer는 모든 종류의 다중 파트 형식을 처리하는 데 매우 유용합니다. 단일 파일 또는 여러 파일의 업로드를 처리할 수 있습니다. 또한 여러 필드에 대한 업로드를 처리할 수 있습니다.

업로드된 파일은 기본적으로 자동 생성으로 이름이 변경되며 미들웨어를 생성하기 위해 multer 함수를 호출할 때 지정한 폴더에 저장됩니다.

또한 업로드된 파일을 무시하고 텍스트 요청 본문을 구문 분석할 수 있습니다.
Ext. util. Mixed Collection (1) 의 기본 동작 해독
block 외부 변수 관리에 대한 탐색

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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