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

<template> <div class="signUp">  <!--<form id="signForm" enctype="multipart/form-data">-->   <div>    <label for="username">用户名</label>    <input type="text" name="username" id="username" placeholder="用户名" v-model="users.username">    <div v-if="judgeUser">请输入合适的用户名</div>   </div>   <div>    <label for="password">密码</label>    <input type="text" name="password" id="password" placeholder="密码" v-model="users.password">    <div v-if="judgePas">请输入符合规范的密码</div>   </div>   <div>    <label for="usernameReply">重复密码</label>    <input type="text" name="usernameReply" id="usernameReply" placeholder="重复密码" v-model="users.passwords">    <div v-if="judgePass">两次输入请保持一致</div>   </div>  <div>   <label for="name">昵称</label>   <input type="text" name="name" id="name" placeholder="昵称" v-model="users.name">   <div v-if="judgeName">请输入昵称</div>  </div>   <div>    <label for="sex">性别</label>    <select name="" id="sex" v-model="users.sex">     <option value="男">男</option>     <option value="女">女</option>    </select>   </div>   <div>    <label for="photo">头像</label>    <input type="file" name="photo" id="photo" @change="onfilechange"> //通过change事件获取到用户所要上传的图片   </div>   <div>    <label for="Pintroduction">个人介绍</label>    <textarea name="Pintroduction" id="Pintroduction" cols="60" rows="8" v-model="users.Pintroduction"></textarea>   </div>   <input type="submit" value="注册" class="submit" @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>

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('/',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.jsvar User=require('../lib/mongo');module.exports={ create:function (useres) {  User.create(useres); }};

// lib/mongo.jsconst moogoose=require('mongoose');moogoose.connect('mongodb://localhost/myblog');moogoose.Promise = global.Promise;const db=moogoose.connection;// exports.db=db;// db.once('open',function () {//// });var userSchema=new moogoose.Schema({  username:{type:'string',unique:true},  password:{type:'string'},  sex:{type:'string'},  pintroduction:{type:'string'},  name:{type:'string'},  filePath:{type:'string'} }, {collection:'user'});var user=moogoose.model('user',userSchema);exports.create=function (useres) { new user(useres).save(function (err,data) { })};