1、下载第三方插件multer
npm install multer --save
2、先写一个上传图片的接口
在路由文件夹中创建一个fileTest.js文件，代码如下：
// 此文件用于：编写图片上传功能
// 导入模块
var express = require('express');
var router = express.Router();
var _ = require('lodash');
var path = require('path');
var multer = require('multer');
// 文件上传的内置方法
let Imgname = ""; // 图片名称
const storage = multer.diskStorage({
// 文件存储路径
destination(req, file, callback) {
// 上传的图片放到本地的文件夹里面
let imgUrl = "E:/qd/11. node.js/练习/test04_Rest/public/images/fileTestImage"
// 回调函数
callback(null, imgUrl)
},
filename(req, file, callback) {
// 后缀名，到时候添加数据的时候，先把它设为空，然后进入图片上传页，然后做修改的操作
Imgname = _.random(0, 9999999999999) + path.extname(file.originalname);
callback(null, Imgname);
}
});
// 也是内置函数
const addfild = multer({
storage
})
router.get("/",(req, res, next) => {
res.render('fileTest',{t:1});
})
// 在这里传内置对象过去
router.post("/file",addfild.single('file'), (req, res, next) => {
console.log(req.body);
})
module.exports = router;
3、编写 ejs 页面
页面代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片上传</title>
</head>
<body>
<h1>
<%=msg%>
</h1>
<div id="app">
<input type="file" @change="file">
</div>
</body>
<script src="javascripts/axios.js"></script>
<script src="javascripts/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
// file:"",
},
created() {
},
methods: {
file(e) {
let formDate = new FormData();
formDate.append('file', e.target.files[0]);
console.log(formDate);
console.log(e.target.files[0]);
axios
.post("http://127.0.0.1:8082/file/file", formDate)
.then((data) => {
})
}
},
})
</script>
</html>
4、将图片的路径保存到数据库里面
res.send({msg:'上传成功！'，data:'/路径/'+Imgname})
标签：node,req,js,multer,file,var,上传,图片 From： https://www.cnblogs.com/fairya/p/16717155.html