图片上传到服务器
技术栈 : 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>