React로 이미지 올리기

* '따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기' 강의 참고

* react -> node.js로 이미지 올리기 

 

* 오류 1 : handler assigned value but never used

- react에서 파일을 올릴 때 axios가 포함된 파일 내 handler가 인식되지 않음

- 이미지 올릴 때 react-dropzone 사용함

 

* 해결책 

- Dropzone 사용 시 onDrop={}에 제대로 Handler가 있는지 확인

- onDrop 내 console.log()가 Handler를 읽어오는데 방해될 수 있으므로 제거

 

//수정 전
function testUpload() {
const Handler = (files) => {
	//config
    //axios 포함
}

return (
	<Dropzone onDrop={Handler => console.log(Handler)}>
	)
}

//수정 후
function testUpload() {
const Handler = (files) => {
	//config
    //axios 포함
}

return (
	<Dropzone onDrop={Handler}>
	)
}

 

 

* Client

 

* dropzone 

* 출처 (https://www.npmjs.com/package/react-dropzone)

 

 

 

 

* FileUpload.js

 

import React from "react";
import Dropzone from "react-dropzone";
import { PlusOutlined } from "@ant-design/icons";
import axios from "axios";

function FilUpload() {
  const dropHandler = (files) => {
    let formData = new FormData();

    const config = {
      header: { "content-type": "multipart/form-data" },
    };

    formData.append("file", files[0]);

    axios.post("/upload/image", formData, config).then((response) => {
      if (response.data.success) {
        console.log(response.data);
      } else {
        alert("파일을 저장하는데 실패했습니다.");
      }
    });
  };
  return (
    <div style={{ display: "flex", justifyContent: "space-between" }}>
      <Dropzone onDrop={dropHandler}>
        {({ getRootProps, getInputProps }) => (
          <div {...getRootProps()}>
            <input {...getInputProps()} />
            <PlusOutlined />
          </div>
        )}
      </Dropzone>
    </div>
  );
}

export default FilUpload;

 

 

* Server

- app.js 

- routes/index.js

- upload.ctrl.js

 

* mutler 이용 (출처 : (https://www.npmjs.com/package/multer))

 

 

* app.js 

 

//라우터 분리
const productRouter = require("./routes/product");

app.use("/upload", productRouter);

 

* routes/index.js

 

const express = require("express");
const router = express.Router();
const uploadCtrl = require("./upload.ctrl");

router.post("/image", uploadCtrl.process.ImgUpload);

module.exports = router;

 

* upload.ctrl.js

 

"use strict";
const multer = require("multer");

const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, "uploads/");
  },
  filename: function (req, file, cb) {
    cb(null, `${Date.now()}_${file.originalname}`);
  },
});

const upload = multer({ storage: storage }).single("file");

const process = {
  ImgUpload: (req, res) => {
    upload(req, res, (err) => {
      console.log("req", req);
      console.log("res", res);
      if (err) {
        return res.json({ success: false, err });
      }
      return res.json({
        success: true,
        filePath: res.req.file.path,
        fileName: res.req.file.filename,
      });
    });
  },
};

module.exports = {
  process,
};