expressJS를 사용하여 파일을 업로드하는 방법

노드를 사용하여 파일을 업로드하는 이 간단한 문제를 해결하는 데 4일과 100번 이상의 시도가 필요했습니다.

그리고 그것을 제대로 이해한 순간, 나는 마치...phewww



이 문제를 해결한 방법은 다음과 같습니다.

생성하여 -

단순 노드 서버입니다.

파일을 처리하는 미들웨어입니다.

파일을 수락하기 위한 POST 경로.

파일을 제공하도록 라우팅합니다.

CORS 문제를 처리하는 미들웨어(postman에서는 이 문제가 발생하지 않음).

익스프레스를 사용하는 노드 서버

아래 명령을 사용하여 프로젝트를 초기화합니다.

node init

필요한 종속성을 설치합니다.

using npm -> npm i express dotenv
using yarn -> yarn add express dotenv

server.js를 생성하고 코드 아래에 붙여넣기

const express = require("express");
const dotenv = require("dotenv");

const app = express();

dotenv.config(); // <-- To use.env file

app.use(express.json());
/*
express.json() middleware helps us to parse all HTTP requests

like --> req.body

And express.json() middleware always should be at the top

*/

const PORT = process.env.PORT || 5000;
app.listen(
  PORT,
  console.log(`Server is up and running on port ${PORT}`)
);

이제 아래 명령을 사용하여 노드 서버를 실행하십시오.

node server.js

파일을 처리할 미들웨어를 만듭니다.

종속성 설치

using npm -> npm i multer

using yarn -> yarn add multer

processFile.js 파일을 생성하여 아래 코드를 붙여넣고 업로드된 파일을 저장할 폴더upload를 생성합니다.

const multer = require("multer");
const path = require("path");

const MIME_TYPES = {
  "image/jpg": "jpg",
  "image/jpeg": "jpg",
  "image/png": "png",
  // you can add more here
};

const storage = multer.diskStorage({
  destination: (req, file, callback) => {
    callback(null,path.join(__dirname, './upload'));
   // Note ./upload path should be relative. Change this path according to your folder structure
  },
  filename: (req, file, callback) => {
    const name = file.originalname.split(" ").join("_");
    const extension = MIME_TYPES[file.mimetype];
    callback(null, name + Date.now() + "." + extension);
  },
});

const processFile = multer({ storage: storage }).single("file"); //<--here `file` key
/*
Look at the last example of how we will use `file` key to 
upload files using form data and postman.

For accepting multiple files change above line to 

const processFile = multer({ storage: storage }).array('file', 12);
Where 12 is the number of files you want to accept.

*/

module.exports = processFile;

파일을 수락할 POST 경로를 만듭니다.

server.js 파일에 아래 코드 붙여넣기

단일 파일 업로드용

const processFile = require("./processFile");

app.post("/api/upload", processFile, (req, res, next) => {

  const url = req.protocol + "://" + req.get("host");

  const file = url + "/files/" + req.file.filename;

  res.status(201).json({
    message: "Success",
    file: file,
  });
});

여러 파일을 업로드하려면

const processFile = require("./processFile");

app.post("/api/upload", processFile, (req, res, next) => {
  const files = []
  const url = req.protocol + "://" + req.get("host");
  req.files.forEach(file=>{
    const file_url = url + "/files/" + file.filename;
    files.push({
      url: file_url,
    });
  })

  res.status(201).json({
    message: "files saved successfully!",
    files,
  });
});

지금까지는 upload 폴더에 파일을 저장할 수 있지만 응답에서 받은 링크를 사용하여 파일에 액세스할 수 없으므로 해당 파일을 제공해야 합니다.

업로드된 파일 제공
server.js 파일에 아래 코드를 추가하고 서버를 재시작합니다.

const path = require("path");

app.use("/files", express.static(path.join(__dirname, "upload")));

이제 링크를 방문하면 파일을 볼 수 있습니다.

CORS(크로스 오리진 리소스 공유)

참고: 우편 배달부에서는 이 문제가 발생하지 않지만 클라이언트 측 앱에서는 이 문제가 발생합니다.



CORS 문제를 해결하려면

cors 미들웨어를 생성합니다.

파일 맨 위에 cors 미들웨어를 적용합니다.

const cors = (req, res, next) => {
  const origin = "*"; // <-- change this in production
  res.setHeader("Access-Control-Allow-Origin", origin);
  res.setHeader(
    "Access-Control-Allow-Headers",
    "Origin, X-Requested-With, Content, Accept, Content-Type, Authorization"
  );
  res.setHeader(
    "Access-Control-Allow-Methods",
    "GET, POST, PUT, DELETE, PATCH, OPTIONS"
  );
  next();
};

app.use(cors); // <-- Should be at the top

클라이언트에서 파일 업로드

  const data = new FormData();
  data.append("file", FILE_URI);

  fetch("http://localhost:5000/api/upload", {
    method: "post",
    body: data,
  })
  .then((res) => res.json())
  .catch((err) => {
     console.log(err);
  });

그리고 그것이 제가 이 문제를 해결한 방법입니다. 의심스러운 점이 있으면 알려주세요.


더 많은 블로그 게시물을 보려면 나를 따르십시오.

||