node+vue如何实现用户注册和头像上传

小编给大家分享一下node+vue如何实现用户注册和头像上传，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

vue是什么

Vue是一套用于构建用户界面的渐进式JavaScript框架，Vue与其它大型框架的区别是，使用Vue可以自底向上逐层应用，其核心库只关注视图层，方便与第三方库和项目整合，且使用Vue可以采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。

数据库我使用的是MongoDB。

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

注册的步骤:

1. 将用户名密码，图片等提交给node端

2. node端将图片保存到服务器,图片路径及注册用户的个人信息保存到mongodb数据库。

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

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

前端上传代码如下:

<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>

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) {
 })
};

以上是“node+vue如何实现用户注册和头像上传”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！