여유상점_0921 : 10) Display on ejs from Mysql( Multer )

PB1. img src unknown

1) What is Web Root

Solution

https://stackoverflow.com/questions/56528250/react-node-multer-image-is-not-found-by-path-while-it-exists-on-that-path

Source Code

const express         = require('express');
const util            = require('util')
const router          = express.Router();
const path            = require('path');
const jwt             = require('jsonwebtoken');
const fileUpload      = require('express-fileupload')
const adminController = require('../../controller/admin/admin')
const ProjectUpload   = require('../../middleware/ProjectUpload')
const multer          = require('multer')
const fs              = require('fs')
// 여유상점 db
const connection = require('../../DBConnection/db_rest')

// Set The Storage Engine
const storage = multer.diskStorage({
    destination: __dirname + '../../../../client/data/img/uploadedImage/Projects/',
    filename: function(req, file, cb){
      cb(null,Date.now() + '-' + file.originalname);
    }
  });
  
  // Init Upload
  const upload = multer({
    storage: storage,
    limits:{fileSize: 1000000},
    fileFilter: function(req, file, cb){
      checkFileType(file, cb);
    }
  }).array('Files',10)
  
  // Check File Type
  function checkFileType(file, cb){
    // Allowed ext
    const filetypes = /jpeg|jpg|png|gif/;
    // Check ext
    const extname = filetypes.test(path.extname(file.originalname).toLowerCase());
    // Check mime
    const mimetype = filetypes.test(file.mimetype);
  
    if(mimetype && extname){
      return cb(null,true);
    } else {
      cb('Error: Images Only!');
    }
  }

// project upload
router.post('/projectUpload', async (req,res) => {

    upload(req,res,(err) => {
        if(err){
            console.log("error in multer")
            console.log(err)
            return res.status(404).json({ message : "Multer Error"})
        }else{
            
            console.log(req.files[0])

            const { title_name, 
                date_start, 
                date_end, 
                Cost, 
                opt1_content, 
                opt1_cost, 
                opt2_content,
                opt2_cost,
                Act_start ,
                Act_end ,
                Prog_Num ,
                CreatName ,
                CreatRecommend ,
                Location,
                SubLocation ,
                Is_New,
                Is_Hot,
                ProgOneLine ,
                RegionIntro ,
                ProgIntro ,
                ActIntro ,
                Room ,
                Caution ,
                Schedule ,
                ProgCost ,
                ProgSupp ,
                Questions 
            } = req.body; 

            
            // 중복 "일련번호" 를 통한 가입 방지 ( 일련번호는 프로그램마다의 unique id 이다 )
            connection.db_rest.query('SELECT * FROM project WHERE Prog_Num = ?',
            [Prog_Num], async (error, result) => {
                
                // 현재 올리는 일련번호와 동일한 프로젝트가 있는지 확인하기 
                if(error){
                    console.log(error);
                    return;
                }
                
                console.log(typeof(req.files[3]))
                
                // 같은 일련번호가 존재한다면 alert 띄우기
                if(result[0]){
                    console.log("Same ProgNum Exists")
                    return res.status(404).json({ message : "ProgNum Exist"})
                }
                
                // 'project' table에 insert 하기
                connection.db_rest.query('INSERT INTO project SET ?', {
                    Prog_Name      : title_name, 
                    RegStartDate   : date_start, 
                    RegEndDate     : date_end, 
                    Cost_Program   : Cost, 
                    Option1        : opt1_content, 
                    Option1_Cost   : opt1_cost, 
                    Option2        : opt2_content  ,
                    Option2_Cost   : opt2_cost,
                    Act_StartDate  : Act_start ,
                    Act_EndDate    : Act_end ,
                    Prog_Num       : Prog_Num ,
                    Creator_Name   : CreatName ,
                    Creator_Comment: CreatRecommend ,
                    Location       : Location,
                    LocationRegion : SubLocation ,
                    Is_New         : Is_New,
                    Is_Hot         : Is_Hot,
                    Prog_Exp_One   : ProgOneLine ,
                    Region_Exp     : RegionIntro ,
                    Prog_Exp       : ProgIntro ,
                    Act_Exp        : ActIntro ,
                    Rooms          : Room ,
                    Caution        : Caution ,
                    Schedule       : Schedule ,
                    Cost_Exp       : ProgCost ,
                    Support        : ProgSupp ,
                    Questions      : Questions ,
                    
                    // files
                    // Title_Img1     : 'http://localhost:3100' + req.files[0].destination.split('data')[1] + req.files[0].filename,
                    
                    Title_Img1     : 'http://localhost:3100' + req.files[0].destination.split('data')[1] + req.files[0].filename,
                    Title_Img2     : 'http://localhost:3100' + req.files[1].destination.split('data')[1] + req.files[1].filename,
                    Title_Img3     : 'http://localhost:3100' + req.files[2].destination.split('data')[1] + req.files[2].filename,
                    Creator_Img    : 'http://localhost:3100' + req.files[3].destination.split('data')[1] + req.files[3].filename,
                    Related_File   : req.files[4]
                    
                }, (error, result) => {
                    if(error){
                        console.log("Error in program upload")
                        console.log(error);
                        return res.status(400).json({message : 'failed'})
                    }
                    // 2. admin_region table에 지역 정보만 넣기
                    connection.db_rest.query('INSERT INTO admin_region SET ?', {
                        Region1   :  Location , 
                        Region2   :  SubLocation , 
                    }, (error, result) => {
                        if(error){
                            console.log("Error in programRegion upload")
                            console.log(error);
                            return res.status(400).json({message : 'failed'})
                        }else{
                            console.log('result during uploading :', result)
                            console.log("2nd table Upload successful in backend")
                            return res.status(200).json({ message : 'success'})
                        }
                    })
                })
                
            })
        }
    })
    // deconstructing Text_Infos

    // deconstructing Image Infos
    const {
        MainPhoto1,
        MainPhoto2,
        MainPhoto3,
        CreatPhoto,
        AddedFile
    } = req.files

    console.log("start")

    return;

})

router.post('/part/3/RegionUpload' , async(req,res) => {
    const {
        Region1, 
        Region2,
        RegionEng
    } = req.body

    connection.db_rest.query("INSERT INTO admin_region SET ?", {
        Region1 : Region1,
        Region2 : Region2,
        RegionEng : RegionEng
    }, (error, result) => {
        if(error){
            console.log("Error in program upload")
            console.log(error);
            return res.status(400).json({message : 'failed'})
        }else{
            console.log('result during uploading :', result)
            console.log("new Region Uploaded")
            return res.status(200).json({ message : 'success'})
        }
    })
})

router.post('/part/3/RegionDelete' , (req,res) => {

    console.log("hello")

    const {
        Region2
    } = req.body

    // project list로부터 SubLocation 목록들을 불러온다.
    connection.db_rest.query(`SELECT * FROM project WHERE LocationRegion = "${Region2}"`,
    (err, ProjectRegion ) => {
        if(err){
            console.log(err)
            return res.status(404).json({ message : 'failed'})
        }else{
            if(ProjectRegion[0]){
                return res.status(404).json({ message : 'RegionExist'})
            }
            // 비교시 아무 문제 없다면 delete 한다.
            connection.db_rest.query(`DELETE FROM admin_region WHERE Region2 = "${Region2}"`, 
                (error, result) => {
                    if(error){
                        return res.status(404).json({ message : 'failed'})
                    }else{
                        return res.status(404).json({ message : 'success'})
                    }
                })
            }
        })
    })

module.exports = router;

Tips
1) For destination : you have to manually set the exact path
2) For the location of "http://localhost:3100" > it is the directory you used as an 'app.static' files in main server.js

app.use(express.static(path.join(__dirname +'/../client/data')))