node+vue实现用户注册--头像上传

数据库我使用的是mongodb。
首先做文件上传，要保证协议里面的’Content-Type’为’multipart/form-data’。

注册的步骤:

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

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

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

前端上传代码如下:

<template>
  <div class="signUp">
    
      <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()">
    
  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('/',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);
  }
};

// lib/mongo.js
const 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) {
  })
};