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>