最近正好空闲，写了个实用注册代码，分享给大家，有需要的朋友可以了解一下
数据库我使用的是MongoDB。
首先做文件上传，要保证协议里面的'Content-Type'为'multipart/form-data'。
注册的步骤:
将用户名密码，图片等提交给node端
node端将图片保存到服务器,图片路径及注册用户的个人信息保存到mongodb数据库。
项目目录如下，注册功能只是其中的第一步:
前端框架使用的是vue.js，ajax使用的是vue的组件vue-resource。
前端上传代码如下:
<template> <div> <!--<form enctype="multipart/form-data">--> <div> <label for="username">用户名</label> <input type="text" placeholder="用户名" v-model="users.username"> <div v-if="judgeUser">请输入合适的用户名</div> </div> <div> <label for="password">密码</label> <input type="text" placeholder="密码" v-model="users.password"> <div v-if="judgePas">请输入符合规范的密码</div> </div> <div> <label for="usernameReply">重复密码</label> <input type="text" placeholder="重复密码" v-model="users.passwords"> <div v-if="judgePass">两次输入请保持一致</div> </div> <div> <label for="name">昵称</label> <input type="text" placeholder="昵称" v-model="users.name"> <div v-if="judgeName">请输入昵称</div> </div> <div> <label for="sex">性别</label> <select v-model="users.sex"> <option value="男">男</option> <option value="女">女</option> </select> </div> <div> <label for="photo">头像</label> <input type="file" @change="onfilechange"> //通过change事件获取到用户所要上传的图片 </div> <div> <label for="Pintroduction">个人介绍</label> <textarea cols="60" rows="8" v-model="users.Pintroduction"></textarea> </div> <input type="submit" value="注册" @click="submit()"> <!--</form>--> </div> </template>
<script> //首先现在组件中引入vue和vue-resourece import Vue from 'vue'; import vueRes from 'vue-resource'; //将vue-resourece注册到全局 Vue.use(vueRes); export default{ name:'signUp', data(){ return{ judgeUser:false, judgePas:false, judgePass:false, judgeName:false, users:{ username:null, password:null, passwords:null, sex:null, Pintroduction:null, photo:null, } } }, methods: { submit: function () { var formdata = new FormData(); for (var key in this.users) { //读取data中所要上传的内容循环append到fordata中 if (key) { formdata.append(key, this.users[key]) } } this.$http.post('/signup', formdata,{ //通过调取node端定义的接口，切记一定要将请求头中的Content-Type改为multipart/form-data否则node端获取到的将是一个字符串 headers:{ 'Content-Type':'multipart/form-data' } }) .then() }, onfilechange: function (e) { //获取到图片文件 var files = e.target.files || e.dataTransfer.files; if (!files.length)return; this.users.photo = files[0]; } } } </script>
node端接收代码如下：
var express=require('express'); var router = express.Router(); var formidable=require('formidable');//上传功能的插件 var path=require('path'); var fs=require('fs'); var user=require('../models/users');//注册信息插入数据库的方法 router.post('https://www.jb51.net/',function (req,res) { var uploadDir='./public/images/'; var form=new formidable.IncomingForm(); //文件的编码格式 form.encoding='utf-8'; //文件的上传路径 form.uploadDir=uploadDir; //文件的后缀名 form.extensions=true; //文件的大小限制 form.maxFieldsSize = 2 * 1024 * 1024; form.parse(req, function (err, fields, files) { //fields上传的string类型的信息 //files为上传的文件 var username=fields.username; var password=fields.password; var passwords=fields.passwords; var sex=fields.sex; var pintroduction=fields.Pintroduction; var name=fields.name; var file=files.photo; var oldpath =path.normalize(file.path);//返回正确格式的路径 var newfilename=username+file.name; var newpath=uploadDir+newfilename; //写入数据库的信息 var useres={ username:username, password:password, sex:sex, pintroduction:pintroduction, name:name, }; //将老的图片路径改为新的图片路径 fs.rename(oldpath,newpath,function(err){ if(err){ console.error("改名失败"+err); } else { useres.filePath=newpath; user.create(useres); res.send('注册成功') } }); }) }); module.exports = router;
// models/users.js var User=require('../lib/mongo'); module.exports={ create:function (useres) { User.create(useres); } };