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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。