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 相关文章推荐
sogou地图API用法实例教程
Sep 11 Javascript
node.js中的path.dirname方法使用说明
Dec 09 Javascript
jQuery+ajax实现无刷新级联菜单示例
May 21 Javascript
值得分享和收藏的Bootstrap学习教程
May 12 Javascript
JavaScript中this的四个绑定规则总结
Sep 26 Javascript
jQuery checkbox选中问题之prop与attr注意点分析
Nov 15 Javascript
JS中SetTimeout和SetInterval使用初探
Mar 23 Javascript
JS中正则表达式全局匹配模式 /g用法详解
Apr 01 Javascript
JavaScript比较两个数组的内容是否相同(推荐)
May 02 Javascript
node静态服务器实现静态读取文件或文件夹
Dec 03 Javascript
解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题
Aug 14 Javascript
JS数组方法some、every和find的使用详情
Oct 05 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 - Html Transfer Code
2006/10/09 PHP
php中通过正则表达式下载内容中的远程图片的函数代码
2012/01/10 PHP
探讨PHP调用时间格式的参数详解
2013/06/06 PHP
php jq jquery getJSON跨域提交数据完整版
2013/09/13 PHP
php网站判断用户是否是手机访问的方法
2013/11/01 PHP
php实现图片上传、剪切功能
2016/05/07 PHP
PHP strip_tags保留多个HTML标签的方法
2016/05/22 PHP
JavaScript 继承详解(四)
2009/07/13 Javascript
Javascript中Eval函数的使用
2010/03/23 Javascript
jQuery温习篇 强大的JQuery选择器
2010/04/24 Javascript
jquery.tmpl JQuery模板插件
2011/10/10 Javascript
表单元素的submit()方法和onsubmit事件应用概述
2013/02/01 Javascript
jquery对象和DOM对象的区别介绍
2013/08/09 Javascript
jquery实现的图片点击滚动效果
2014/04/29 Javascript
jquery显示隐藏input对象
2014/07/21 Javascript
JavaScript italics方法入门实例(把字符串显示为斜体)
2014/10/17 Javascript
jquery实现跳到底部,回到顶部效果的简单实例(类似锚)
2016/07/10 Javascript
关于数据与后端进行交流匹配(点亮星星)
2016/08/03 Javascript
Vue中$refs的用法详解
2018/06/24 Javascript
layui获取多选框中的值方法
2018/08/15 Javascript
详解Python的数据库操作(pymysql)
2019/04/04 Python
Python3模拟curl发送post请求操作示例
2019/05/03 Python
python实现DEM数据的阴影生成的方法
2019/07/23 Python
解决python中import文件夹下面py文件报错问题
2020/06/01 Python
python删除指定列或多列单个或多个内容实例
2020/06/28 Python
Django封装交互接口代码
2020/07/12 Python
详解pytorch tensor和ndarray转换相关总结
2020/09/03 Python
美国Lolё官网:购买大胆而美丽的女性运动服装
2017/05/22 全球购物
韩国现代百货官网:Hmall
2018/03/21 全球购物
Java的for语句中break, continue和return的区别
2013/12/19 面试题
保密协议书范本
2014/04/22 职场文书
2014年秋季新学期寄语
2014/08/02 职场文书
离婚协议书怎么写
2014/09/12 职场文书
预备党员个人总结
2015/02/14 职场文书
索赔员岗位职责
2015/02/15 职场文书
Pyqt5将多个类组合在一个界面显示的完整示例
2021/09/04 Python