node.js图片上传把路径传给mongodb数据库

var multer = require('multer')


var storage = multer.diskStorage({

destination: function (req, file, cb) {

cb(null, './public/uploads')

}, filename: function (req, file, cb) {

var exts = file.originalname.split('.')

var ext = exts[exts.length - 1]

var tmpname = (new Date()).getTime() + parseInt(Math.random() * 9999)

cb(null, `${tmpname}.${ext}`)

}

})


var upload = multer({

storage: storage

})


router.post('/upload', upload.single('hehe'), function (req, res) {

var { size, mimetype, path } = req.file

var types = ['jpg', 'jpeg', 'png', 'gif']//运行上传的类型

var tmpType = mimetype.split('/')[1]

if (size > 5000000) {

return res.send({ err_code: -1, message: '尺寸过大' })

} else if (types.indexOf(tmpType) == -1) {

return res.send({ err_code: -2, message: '类型错误' })

} else {

res.status(200).json({

err_code: 0,

message: 'ok',

img:req.file.path

})

}

})

router.post('/article', function (req, res) {

var body = req.body

new Article(body).save(function (err, data) {

if (err) {

res.status(500).json({

err_code: 500,

message: 'ok'

})

}

res.status(200).json({

err_code: 0,

message: 'ok'

})

})

})

记得安装multer

 

	<div class="layui-fluid">
		<div class="layui-row">
				<form class="layui-form" id="article_add" action="/article" method="POST">
				<div class="layui-form-item">
						<label for="title" class="layui-form-label">
							<span class="x-red">*</span>文章标题</label>
						<div class="layui-input-inline">
							<input type="text" placeholder="请输入标题" id="title"  name="title" required="" lay-verify="required"
							 autocomplete="off" class="layui-input"></div>
					</div>
		
					<div class="layui-form-item layui-form-text">
						<label for="content" class="layui-form-label">
							<span class="x-red">*</span>文章内容</label>
							
							<div class="layui-input-block">
									<textarea placeholder="请输入内容"  id="content" name="content"required="" lay-verify="required" class="layui-textarea" style="height: 300px;"></textarea>
								</div>
					</div>
					<input type="text" name="Image" id="Image" value="" src="" hidden/>
					<button class="layui-btn" style="margin-left: 110px;">发布</button>
					</form>


		<input type="file" name="" id="file" style="position: absolute;

		bottom: 35px;
		
		left: 180px;" />
		<button class="layui-btn" onclick="doUpload()" style="position: absolute;
		bottom: 30px;
		left: 380px;">图片上传</button>

<br>
		<img src="" alt="" id="show" style="width: 300px;position: absolute;
		left: 125px;">


	</div>
	</div>
	<script src="/node_modules/jquery/dist/jquery.js"></script>
	<script>
			function doUpload(){
			var file = $('#file').get(0).files[0]
			var formdata = new FormData()
			formdata.append('hehe', file)
			console.log(file)
			$.ajax({
				url: '/upload',
				type: 'post',
				cache: false,
				data: formdata,
				processData: false,
				contentType: false,
				success: function(data) {
					var err_code = data.err_code
					if (err_code===0) {
						layer.alert("上传成功", {
									icon: 6
								})
						$('#Image').attr('value',`${data.img}`)
						$('#show').attr('src',`${data.img}`)
					} else if(err_code===-1){
						layer.alert("图片尺寸太大", {
									icon: 2
								})
					}else if(err_code===-2){
						layer.alert("类型不合格", {
									icon: 2
								})
					}
				}
	
			})
			}
		</script>
	<script>
		layui.use(['form', 'layer'],
			function () {
				$ = layui.jquery;
				var form = layui.form,
					layer = layui.layer;


			});
	</script>
	<script>
				$('#article_add').on('submit', function (e) {
					e.preventDefault()
					var formData = $(this).serialize()
					$.ajax({
						url: '/article',
						type: 'post',
						data: formData,
						dataType: 'json',
						success: function (data) {
							var err_code = data.err_code
							if (err_code === 0) {
								layer.alert("发布成功", {
									icon: 6
								},
									function () {
										//关闭当前frame
										xadmin.close();
		
										// 可以对父窗口进行刷新 
										xadmin.father_reload();
									});
							} else if (err_code === 500) {
								layer.alert('服务器忙，请稍后重试！')
							}
						}
					})
				})
			</script>