NodeJS上传表单、图片

电玩女神 2022-05-31 13:38 207阅读 0赞

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" οnchange="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>