图片上传到服务器

技术栈 : NodeJs + ajax / html
两种方式

1、表单验证 form

用post方式请求 要加 enctype=“multipart/form-data”(文件上传必须要加)

<form action="http://localhost:3000/imgup/upload" method="POST" enctype="multipart/form-data">
        <input type="file" name="logo">
        <input type="submit" value="form方式上传">
    </form>

后台服务

let multer = require("multer")
let express = require("express")
let router = express.Router()
let storage = multer.diskStorage({
    destination:function(req,file,cb){
        cb(null,"./imgup")
    },
    filename:function(req,file,cb){
        let fext = file.originalname.split(".")[1]
        let fname = new Date().getTime()
        cb(null,`${fname}.${fext}`);
    }
});
let upload = multer({
    storage:storage
});
router.post("/upload",upload.single("logo"),function(req,res,next){
    res.send({msg:"上传ok"})
});

module.exports = router

在server.js中配好路由

2、ajax方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./node_modules/jquery/dist/jquery.min.js"></script>
</head>
<body>
    <input type="file" id="file">
    <button onclick="upfun()">点我上传图片</button>
</body>
</html>
<script>
    function upfun(){
        let el = $("#file").get(0).files[0]
        console.log(el);
        let formdata = new FormData()
        formdata.append("logo",el)

        $.ajax({
            url:"http://localhost:3000/imgup/upload",
            type:'POST',
            cache:false,
            data:formdata,
            processData:false,
            contentType:false,
            success(data){
                console.log(data)
            }
        })
    }
</script>