NodeJS上传表单、图片

ps： 这个在之前研究node的express框架+mongodb练习的时候遇到的问题，就是如何把图片进行上传到后台，本案例包括前端页面展示，现在进行了总结

1、先配置上传地址

var multer = require('multer')
var fs = require('fs')//(必须引入的模块)
var storage = multer.diskStorage({
	destination:function(req, file, cb) {
		cb(null, 'public/uploads/')  //uploads  需要手动创建
	}
})

var upload = multer({
	storage:storage
})

2、上传form表单

router.post('/proupload',upload.array('file',1),(req,res,next) => {  //第一个参数地址，第二个是照片数量，第三个是回调
	var proObj = req.body 
		if(req.files.length != 0){ //判断submit提交是否有file值，有的话执行如下操作
			var arr = req.files[0];//取到文件（照片）
			var obj = new Object();//定义一个对象
			fs.rename(arr.destination + arr.filename, arr.destination + arr.originalname,() => { //利用fs模块对获取的文件名进行重命名
			obj.origin ='http://localhost:3000/uploads/'+ arr.originalname;//拼接，把照片地址改成服务器能获取的地址
				proObj.poster = obj//把对象赋值给req.body（根据需要，这是主要是需要在proObj内部进行嵌套，一般可直接应用，无需定义obj对象）
		console.log(proObj._id)//本来打算利用数据库的唯一标识符_id进行修改，结果发现想多了
		MongoClient.mongoConnect('app',(db) => {
			console.log('chenggonfle哈哈')//小编测试了一下是否连接到了数据库
			MySql.updateData(db,'movies',{"name":proObj.name},{$set:proObj},() => {//此处是利用from表单内部传过来的名字
				res.send()//注意应用重定向时，send要传空值
				res.redirect('/')//重定向到首页
				db.close();
			})
		},(err) => {
			console.log(err)
			res.send('0')
			db.close();
		})
			},(err) => {
				res.send('0')
			})
		}else{//file只有文本没有文件照片的时候
				MongoClient.mongoConnect('app',(db) => {
					console.log('成功了啊 啊啊')
					console.log(proObj.id)
					console.log(proObj)
				MySql.updateData(db,'movies',{"name":proObj.name},{$set:proObj},() => {
					console.log('修改成功')
					res.send()
					res.redirect('/')
					db.close();
				})
			},(err) => {
				console.log(err)
				res.send('0')
				db.close();
			})
		}
})

3.前端页面（这里直接把我整个demo粘贴过来了，这里既然是练习后端，所以我是以form表单的形式）

<form action="http://localhost:3000/users/proupload" method="post" enctype="multipart/form-data">
                  <input type="hidden" name="id"  id="ids"/>
                  <div class="form-group">
                      <label for="exampleInputEmail1">影名</label>
                      <input name="name" type="text" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
                  </div>
                  <div class="form-group">
                      <label for="exampleInputPassword1">票价</label>
                      <input name="ticket" type="text" class="form-control" id="exampleInputPassword1" placeholder="Password">
                  </div>
                  <div class="form-group">
                      <label for="pingfen">简介</label>
                      <textarea name="intro" name="" rows="2" cols="43" id="pingfen"></textarea>
                  </div>
                  <div class="form-group">
                      <label for="exampleInputFile">File input</label>
                      <input name="file" type="file" id="exampleInputFile" onchange="previewFile()">
                      <p class="help-block">Preview the image below.</p>
<img id="imgs" height="50" alt="Image preview...">
                  </div>
                  <button type="submit" class="btn btn-info" id="buttonS">Submit</button>
              </form>