Node js 파일 업로드

ever.d·2022년 9월 13일
0

STUDY

목록 보기
3/7

파일을 첨부하여 다른 서버로 저장 혹은 전송하려면
1. multer 나 2. express file upload 라이브러리를 활용할 수 있다.
초반에 buffer 때문에 삽질을 꽤 한 적이 있기에 따로 포스팅으로 그 과정을 기록한다.

express + express-file upload

html 예시

<form action="/send" method="post" enctype="multipart/form-data">
    <input type="text" name="userName"><br/>
    <input type="text" name="userAge"><br/>
    <input type="file" name="userFile" multiple>      // 파일을 여러 개 첨부하고 싶으면 multiple로 표시함.
    <input type="submit">
</form>

js code 예시

const express = require("express");
const sendExample = express.Router();
const bodyParser = require("body-parser");
const axios = require('axios');
const fileUpload = require("express-fileupload");
const FormData = require('form-data')


sendExample.use(bodyParser.json());
sendExample.use(bodyParser.urlencoded({ extended: true }));


sendExample.post("/send", (req, res) => {

    let formData = new FormData();

    formData.append("userName", req.body.userName)      // html input 태그의 name과 일치시킴.
    formData.append("userAge", req.body.userAge)        // html input 태그의 name과 일치시킴.

    if (req.files) {
        for (i = 0; i < req.files.userFile.length; i++) {

            let file = req.files.userFile[i];
            formData.append('userFile', file.data, {filename: file.name});
        }
    }
    
    const send_option = {
        method: "post",
        url: 'form 정보를 보내고자 하는 url',
        timeout: 1000,      			// 임의로 지정함.
        headers: {
            ...formData.getHeaders()
        },
        data: formData,          		// 위에서 지정한 formData

    }
    
    axios(request_config)
        .then(res => {
            console.log('success');
        })
        .catch(err => {
            console.log(err)
        })
    res.status(200).send()
});

가장 중요한 부분은 ❗️

  1. header에 formData에서 얻은 header 정보를 넣어주는 것. 따로 header를 지정해주면 계속 error 가 떴다.
  2. bodyparser 관련 사용한 부분을 지정하는 것.
  3. formData.append 할 때의 파일 형식 등이다. file.data가 file의 buffer라고 생각하면 되겠다.
    multer의 경우에는 이 형식이 살짝 다르다. filename에 file.originalname을 넣어주는 등...

언제나 도움이 되는 official documents

profile
developer / not moving for fortune, only aiming for clear sense of purpose. That's all.

0개의 댓글