multer(form-data 다루기)[1] Client & Server

1. Form 태그
2. new FormData()
3. multer 설정(server side)

Form 태그

태그를 활용하면 간단하게 form-data를 전송할 수 있지만 manual하게 form-data를 만들어서 서버로 보내줘야 하는 경우도 생긴다.

// MDN example
<form action="http://example/submit" method="post" enctype="multipart/form-data" class="form-example">
  <div class="form-example">
    <label for="name">Enter your name: </label>
    <input type="text" name="name" id="name" required>
  </div>
  <div class="form-example">
    <label for="email">Enter your email: </label>
    <input type="email" name="email" id="email" required>
  </div>
  <div class="form-example">
    <input type="submit" value="Subscribe!">
  </div>
</form>

name과 email <inpuit>태그에 입력된 값들을 type="submit" <input> 태그를 누르면 form-data가 action에 적힌 api로 전송된다(method는 경우에 따라서 정해주면 된다.)

 

new FormData()

const formData = new FormData();

// formData.append('key', 'value')
formData.append('name', 'flex')
formData.append('email', 'flexaveler@gmail.com')

FormData 객체를 이용하면 manual하게 formdata를 구성할 수 있다. append method를 사용해서 첫번째 인자로 key값을 두번째 인자로 value값을 넣어주면 된다. 파일을 포함하여 여러가지 타입의 값들을 보내줄 수 있다.(string, number, array, file 등등)

const sendFormData = (url, formData) => {
    return fetch(url, {
        method: 'POST',
        body: formData,
    }).then(res => console.log(res.status))
}

manual하게 만든 formData를 fetch API를 이요해서 server로 보낼 수 있는데 여기서 중요한 점은 header > content-type을 설정하면 전송이 제대로 이루어지지 않는다는 점이다. method와 body만을 넣어주면 된다.

 

multer(server side)

npm install multer
  or
yarn add multer

multer 모듈 설치 후 server에 import 해준다.

const express = require('express')
const app = express()
// multer setting
const multer = require('multer')
const upload = multer({ dest: 'uploads/' })

const port = 4000

app.use(express.json())

app.get('/', (req, res) => {
  res.send('ez multer!')
})

app.listen(port, () => {
console.log(`listening at ${port}`)
})

multer method에는 .single(fieldname), .array(fieldname[, maxCount]), .fields(fields), .none(), .any() 가 있다.

file이 아닌 값들은 req.body를 통해 확인이 가능하다.

 

 

.single(fieldname)

app.use('/single', upload.single('name'), (req, res, next) => {
	const { name } = req.body;
    res.send(name);
}

하나의 값만을 받을 때 쓴다. filename 위치에 formData.append 했던 key를 넣어주면 된다.

 

.fields(fields)

const profileUpload = upload.fields([{name: 'name'}, {name: 'email'}])

app.use('/fields', profileUpload, (req, res, next) => {
	const { name, email } = req.body;
    res.send(req.body);
}

여러가지 값을 받을 떄는 fileds 위치에 배열 안에 각 엘리먼트를 객체 형태로 설정해주면 된다. 각 엘리먼트에는 name이라는 key를 지정해주고 value로 formData.append 했던 key를 넣어주면 된다.