使用 Node.js 上传图片(未定义 Cookie)

时间:2021-03-07 15:24:24

标签: javascript node.js express cookies file-upload

我正在使用一个带有 cookie 的简单节点 js 图像上传器,但它没有获取 cookie。我是新手,所以需要帮助。

这里是nodejs的代码

const express = require('express');
const app = express();
const path = require('path');
const multer = require('multer');
const cors = require('cors')


const {v4:uuid} =require('uuid')
var fs = require('fs');
var dir 
app.use(cors())
app.use('/uploads', express.static(path.join(__dirname, '/uploads')));

const storage = multer.diskStorage({
    destination: (req, file, cb) => {
        cb(null, dir);
    },
    filename: (req, file, cb) => {
        console.log(file);
        cb(null, uuid() + path.extname(file.originalname));
    }
});
const fileFilter = (req, file, cb) => {
    // if (file.mimetype == 'image/jpeg' || file.mimetype == 'image/png') {
        cb(null, true);
    // } else {
    //     cb(null, false);
    // }
}
const upload = multer({ storage: storage, fileFilter: fileFilter });
const openDir=(req, res, next)=>{
console.log("openDir")
    dir = './uploads/'+(req.uid?req.uid:"fls");

    if (!fs.existsSync('./uploads')){
        fs.mkdirSync('./uploads');
    }


if (!fs.existsSync(dir)){
    fs.mkdirSync(dir);
}
next()
}
//Upload route
app.post('/upload',openDir, upload.single('photo'), (req, res, next) => {
    console.log("req.headers.cookie:  ",req.headers.cookie)
    var fullUrl = req.protocol + '://' + req.get('host') + dir.substring(1)+"/"+req.file.filename;
    console.log(fullUrl)
    if(req.file) {
        res.json(fullUrl);
    }
    else throw 'error';
});

const PORT =process.env.PORT || 3000
app.listen(PORT, () => console.log(`Hello world app listening on port ${PORT}!`));

前端是

<!DOCTYPE html>

<html lang="en-US">
    <head>
        <!-- Meta setup -->
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="keywords" content="">
        <meta name="decription" content="">
        
        <!-- Title -->
        <title>Welcome</title>
        
        <!-- Fav Icon -->
        <link rel="icon" href="img/logo.png" /> 

        <!-- Include Bootstrap -->
        <link rel="stylesheet" href="css/bootstrap.css" />

        <!-- Include fonts -->
        <link rel="stylesheet" href="css/font.css" />
        
        <!-- Main StyleSheet -->
        <link rel="stylesheet" href="style.css" />  

        <!-- Include fonts -->
        <link rel="stylesheet" href="css/font.css" />
        
        <!-- Responsive CSS -->
        <link rel="stylesheet" href="css/responsive.css" /> 
        
    </head>
    <body onload="logoImage()">
        <!--[if lte IE 9]>
            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
        <![endif]-->
        
        <div class="main main-one">
            <!-- logo area start -->
            <div class="logo">
                <div class="container-fluid">
                    <div class="logo-wrapper">
                        <a href="#">
                            <img id="inBox" >
                            <!-- <img src="img/logo.png" alt="logo"> -->
                        </a>
                    </div>
                </div>
            </div>
            <!-- logo area end -->

            <!-- caform area start -->
            <div class="cafrom">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-10 offset-lg-1">
                            <div class="cafrom-wrapper">
                                <div class="row">
                                    <div class="col-lg-6 col-md-6 ">
                                        <div class="caform-left cafrom-left-bg">
                                            <form action="http://localhost:3000/upload" method="post" enctype="multipart/form-data" >  
                                                
                                                <div class="caform-left-input">
                                                    <div>
                                                        <span>Upload a photo..</span>
                                                        <input type="file" class="uploadlogo" name="photo" id="output"  />
                                                    </div>
                                                     
                                                    <!-- <form action="/upload" method="post" enctype="multipart/form-data">
                                                    <input type="file" accept="image/*" name="photo" >
                                                    <input type="submit" value="upload">
                                                    </form> -->
      

                                                    
                                                    <!-- <button type="submit" id="submit"  >Upload</button> -->
                                                    <button type="submit" class="sbtn btn btn-secondary btn-c" onclick="spinner()">Upload</button>
                                                    <div class="loader">
                                                    <div class="loading">
                                                    </div>
                                                </div>
                                                <button  onclick="skip(event)">Skip</button>
                                                    <!-- <a   class="btn btn-primary btn-lg disabled" role="button" href="./email_verification.html">Skip</a> -->
                                                </div>
                                            </form  >
                                            <!-- <div class="policy">
                                                <p>By continuing, you're confirming that you've read and agree to our  <a href="#">erms and Conditions,</a> <a href="#">Privacy  Policy </a> and <a href="#">Cookie Policy</a></p>
                                            </div> -->
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6">
                                        <div class="caform-right text-center">
                                            <h3>We're almost done<br/>
                                                Just upload your picture</h3>
                                            
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- caform area end -->
        </div>
        <!-- Main jQuery -->
        <script src="js/jquery-3.4.1.min.js"></script>      

        <!-- Bootstrap Proper jQuery -->
        <script src="js/popper.js"></script>
        
        <!-- Bootstrap jQuery -->
        <script src="js/bootstrap.js"></script>

        <!-- Fontawesome Script -->
        <script src="https://kit.fontawesome.com/7749c9f08a.js"></script>
        
        <!-- Custom jQuery -->
        <script src="js/scripts.js"></script>

        <script src="../actions.js"></script>
    </body>
</html>

当我上传图像时,它成功地将其上传到我的本地“上传”目录,但在控制台上我看到第 50 行的“req.headers.cookie:undefined”。

我错过了什么吗?请帮忙。非常感谢各位!

0 个答案:

没有答案