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


Posted in Javascript onJuly 20, 2017

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

数据库我使用的是MongoDB。

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

注册的步骤:

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

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

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

前端框架使用的是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) {
 })
};

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用JavaScript对JSON进行模式匹配 (Part 2 - 实现)
Jul 17 Javascript
读jQuery之十三 添加事件和删除事件的核心方法
Aug 23 Javascript
在javascript中关于节点内容加强
Apr 11 Javascript
js单例模式详解实例
Nov 21 Javascript
javascript数组随机排序实例分析
Jul 22 Javascript
JavaScript中this的9种应用场景及三种复合应用场景
Sep 12 Javascript
js面向对象的写法
Feb 19 Javascript
分享jQuery封装好的一些常用操作
Jul 28 Javascript
js实现可输入可选择的select下拉框
Dec 21 Javascript
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
Jan 25 jQuery
使用vue + less 实现简单换肤功能的示例
Feb 21 Javascript
JS/CSS实现字符串单词首字母大写功能
Sep 03 Javascript
深入探究AngularJs之$scope对象(作用域)
Jul 20 #Javascript
通过命令行创建vue项目的方法
Jul 20 #Javascript
基于BootStrap实现简洁注册界面
Jul 20 #Javascript
AngularJS实现的JSONP跨域访问数据传输功能详解
Jul 20 #Javascript
深入探究node之Transform
Jul 20 #Javascript
微信小程序“摇一摇”的实例代码
Jul 20 #Javascript
基于JavaScript实现微信抢红包功能
Jul 20 #Javascript
You might like
PHP代码实现表单数据验证类
2015/07/28 PHP
Zend Framework实现多文件上传功能实例
2016/03/21 PHP
利用php抓取蜘蛛爬虫痕迹的示例代码
2016/09/30 PHP
ThinkPHP实现的rsa非对称加密类示例
2018/05/29 PHP
在js中使用&quot;with&quot;语句中跨frame的变量引用问题
2007/03/08 Javascript
基于jquery实现的表格分页实现代码
2011/06/21 Javascript
JavaScript中OnLoad几种使用方法
2012/12/15 Javascript
js中的cookie的读写操作示例详解
2014/04/17 Javascript
javascript拖拽效果延伸学习
2016/04/04 Javascript
Ionic如何实现下拉刷新与上拉加载功能
2016/06/03 Javascript
html+js+highcharts绘制圆饼图表的简单实例
2016/08/04 Javascript
微信小程序 自定义Toast实例代码
2017/06/12 Javascript
Node.js学习之地址解析模块URL的使用详解
2017/09/28 Javascript
轻松理解vue的双向数据绑定问题
2017/10/30 Javascript
微信小程序地图导航功能实现完整源代码附效果图(推荐)
2019/04/28 Javascript
一文搞懂ES6中的Map和Set
2019/05/20 Javascript
原生JS实现pc端轮播图效果
2020/12/21 Javascript
通过代码实例展示Python中列表生成式的用法
2015/03/31 Python
Python文件操作,open读写文件,追加文本内容实例
2016/12/14 Python
Python中.join()和os.path.join()两个函数的用法详解
2018/06/11 Python
Python3使用turtle绘制超立方体图形示例
2018/06/19 Python
在Mac中PyCharm配置python Anaconda环境过程图解
2020/03/11 Python
python画环形图的方法
2020/03/25 Python
Django使用rest_framework写出API
2020/05/21 Python
Python第三方库安装缓慢的解决方法
2021/02/06 Python
Sarenza德国:法国最大的时尚鞋和包包网上商店
2019/06/08 全球购物
Lookfantastic俄罗斯:欧洲在线化妆品零售商
2019/08/06 全球购物
Bluebella德国官网:英国性感内衣和睡衣品牌
2019/11/08 全球购物
艺术系大学生毕业个人自我评价
2013/09/19 职场文书
美术专业个人自我评价
2014/01/18 职场文书
致标枪运动员广播稿
2014/02/06 职场文书
十一酒店活动方案
2014/02/20 职场文书
公共场所禁烟倡议书
2014/08/30 职场文书
庆元旦主持词
2015/07/06 职场文书
用Python简陋模拟n阶魔方
2021/04/17 Python
5种方法告诉你如何使JavaScript 代码库更干净
2021/09/15 Javascript