node+vue实现用户注册和头像上传的实例代码

最近正好空闲，写了个实用注册代码，分享给大家，有需要的朋友可以了解一下

数据库我使用的是MongoDB。

首先做文件上传，要保证协议里面的'Content-Type'为'multipart/form-data'。

注册的步骤:

将用户名密码，图片等提交给node端
node端将图片保存到服务器,图片路径及注册用户的个人信息保存到mongodb数据库。

项目目录如下，注册功能只是其中的第一步:

前端框架使用的是vue.js，ajax使用的是vue的组件vue-resource。

前端上传代码如下:

</div>
<p><input type="submit" value="注册" class="submit" @click="submit()"></p>
  
</div>
</template>
</pre>
</div>
<div class="jb51code">
<pre class="brush:js;">
<script>
//首先现在组件中引入vue和vue-resourece   
import Vue from 'vue';
import vueRes from 'vue-resource';
//将vue-resourece注册到全局  
Vue.use(vueRes);
<p>export default{<br />
name:'signUp',data(){<br />
return{<br />
judgeUser:false,judgePas:false,judgePass:false,judgeName:false,users:{<br />
username:null,password:null,passwords:null,sex:null,Pintroduction:null,photo:null,}<br />
}<br />
},methods: {<br />
submit: function () {<br />
var formdata = new FormData();<br />
for (var key in this.users) {  //读取data中所要上传的内容循环append到fordata中<br />
if (key) {<br />
formdata.append(key,this.users[key])<br />
}<br />
}</p>
<p>this.$http.post('/signup',formdata,{ //通过调取node端定义的接口，切记一定要将请求头中的Content-Type改为multipart/form-data否则node端获取到的将是一个字符串<br />
headers:{<br />
'Content-Type':'multipart/form-data'<br />
}<br />
})<br />
.then()<br />
},onfilechange: function (e) { //获取到图片文件<br />
var files = e.target.files ||     e.dataTransfer.files;<br />
if (!files.length)return;<br />
this.users.photo = files[0];<br />
}<br />
}</p>
<p>}</p>
</script>
</pre>
</div>
<p>node端接收代码如下：</p>
<div class="jb51code">
<pre class="brush:js;">
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');//注册信息插入数据库的方法
<p>router.post('/',function (req,res) {<br />
var uploadDir='./public/images/';<br />
var form=new formidable.IncomingForm();<br />
//文件的编码格式<br />
form.encoding='utf-8';<br />
//文件的上传路径<br />
form.uploadDir=uploadDir;<br />
//文件的后缀名<br />
form.extensions=true;<br />
//文件的大小限制<br />
form.maxFieldsSize = 2 <em> 1024 </em> 1024;<br />
form.parse(req,function (err,fields,files) {<br />
//fields上传的string类型的信息<br />
//files为上传的文件<br />
var username=fields.username;<br />
var password=fields.password;<br />
var passwords=fields.passwords;<br />
var sex=fields.sex;<br />
var pintroduction=fields.Pintroduction;<br />
var name=fields.name;</p>
<p>var file=files.photo;</p>
<p>var oldpath =path.normalize(file.path);//返回正确格式的路径</p>
<p>var newfilename=username+file.name;<br />
var newpath=uploadDir+newfilename;</p>
<p>//写入数据库的信息<br />
var useres={<br />
username:username,password:password,sex:sex,pintroduction:pintroduction,name:name,};</p>
<p>//将老的图片路径改为新的图片路径<br />
fs.rename(oldpath,newpath,function(err){<br />
if(err){<br />
console.error("改名失败"+err);<br />
}<br />
else {<br />
useres.filePath=newpath;<br />
user.create(useres);<br />
res.send('注册成功')<br />
}<br />
});<br />
})<br />
});</p>
<p>module.exports = router;</p>
</pre>
</div>
<div class="jb51code">
<pre class="brush:js;">
// models/users.js
<p>var User=require('../lib/mongo');<br />
module.exports={</p>
<p>create:function (useres) {<br />
User.create(useres);<br />
}<br />
};</p>
</pre>
</div>
<div class="jb51code">
<pre class="brush:js;">
// lib/mongo.js
const moogoose=require('mongoose');
<p>moogoose.connect('mongodb://localhost/myblog');</p>
<p>moogoose.Promise = global.Promise;</p>
<p>const db=moogoose.connection;</p>
<p>// exports.db=db;<br />
// db.once('open',function () {<br />
//<br />
// });</p>
<p>var userSchema=new moogoose.Schema({<br />
username:{type:'string',unique:true},password:{type:'string'},sex:{type:'string'},pintroduction:{type:'string'},name:{type:'string'},filePath:{type:'string'}<br />
},{collection:'user'}<br />
);</p>
<p>var user=moogoose.model('user',userSchema);</p>
<p>exports.create=function (useres) {<br />
new user(useres).save(function (err,data) {<br />
})<br />
};</p>
</pre>
</div>
<p>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。</p><div class="topcard-tags"><a href="https://m.jb51.cc/tag/vue/" class="tag_link" target="_blank">vue</a><a href="https://m.jb51.cc/tag/pvue/" class="tag_link" target="_blank">vue</a><a href="https://m.jb51.cc/tag/vuetouxiangshangchuan/" class="tag_link" target="_blank">vue头像上传</a><a href="https://m.jb51.cc/tag/touxiangshangchuan/" class="tag_link" target="_blank">头像上传</a><a href="https://m.jb51.cc/tag/yonghuzhuce/" class="tag_link" target="_blank">用户注册</a></div>
                </div>
              </div>
          </div>
            
            <div class="clearfix"></div>

            <div class="col-sm-12 col-md-12 col-lg-12">
              <div class="card">
                <div class="title"><h1>相关文章</h1></div><div class="list_con">
              <div class="title">
                <a href="https://m.jb51.cc/nodejs/4576019.html" title="基于nodejs的ssh2怎么实现自动化部署">基于nodejs的ssh2怎么实现自动化部署</a>
              </div>
              <div class="summary">这篇文章主要介绍“基于nodejs的ssh2怎么实现自动化部署”的...</div>
            </div><div class="list_con">
              <div class="title">
                <a href="https://m.jb51.cc/nodejs/4575855.html" title="nodejs怎么实现目录不存在自动创建">nodejs怎么实现目录不存在自动创建</a>
              </div>
              <div class="summary">本文小编为大家详细介绍“nodejs怎么实现目录不存在自动创建...</div>
            </div><div class="list_con">
              <div class="title">
                <a href="https://m.jb51.cc/nodejs/4575854.html" title="如何把nodejs数据传到前端">如何把nodejs数据传到前端</a>
              </div>
              <div class="summary">这篇“如何把nodejs数据传到前端”文章的知识点大部分人都不...</div>
            </div><div class="list_con">
              <div class="title">
                <a href="https://m.jb51.cc/nodejs/4575851.html" title="nodejs如何实现定时删除文件">nodejs如何实现定时删除文件</a>
              </div>
              <div class="summary">本文小编为大家详细介绍“nodejs如何实现定时删除文件”，内...</div>
            </div><div class="list_con">
              <div class="title">
                <a href="https://m.jb51.cc/nodejs/4575849.html" title="nodejs安装模块卡住不动怎么解决">nodejs安装模块卡住不动怎么解决</a>
              </div>
              <div class="summary">这篇文章主要讲解了“nodejs安装模块卡住不动怎么解决”，文...</div>
            </div><div class="list_con">
              <div class="title">
                <a href="https://m.jb51.cc/nodejs/4575847.html" title="如何检测nodejs有没有安装成功">如何检测nodejs有没有安装成功</a>
              </div>
              <div class="summary">今天小编给大家分享一下如何检测nodejs有没有安装成功的相关...</div>
            </div></div>
            </div>
           
        </div>
      </div>
    <footer id="footer">
    <div class="container">
        <div class="copyright">
            Copyright © 2018 编程之家. 当前版本 V7.0.16<br>
            <span class="ml5">编程之家 版权所有 
            <a href="https://beian.miit.gov.cn/"  target="_blank"  rel="nofollow">闽ICP备13020303号-8</a>
        </div>
    </div>
</footer>
<script src="https://m.jb51.cc/js/count.js"></script>
  </body>
</html>