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 相关文章推荐
JS获取整个页面文档的实现代码
Dec 15 Javascript
html的DOM中document对象images集合用法实例
Jan 21 Javascript
jQuery插件实现大图全屏图片相册
Mar 14 Javascript
深入浅析JavaScript的API设计原则
Jun 14 Javascript
jQuery Ajax Post 回调函数不执行问题的解决方法
Aug 15 Javascript
关于Javascript回调函数的一个妙用
Aug 29 Javascript
js获取时间函数及扩展函数的方法
Oct 30 Javascript
three.js中3D视野的缩放实现代码
Nov 16 Javascript
Vue的移动端多图上传插件vue-easy-uploader的示例代码
Nov 27 Javascript
解决js相同的正则多次调用test()返回的值却不同的问题
Oct 10 Javascript
你应该了解的JavaScript Array.map()五种用途小结
Nov 14 Javascript
关于在LayUI中使用AJAX提交巨坑记录
Oct 25 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检测url是否存在的方法
2015/04/14 PHP
php生成数字字母的验证码图片
2015/07/14 PHP
PHP缩略图生成和图片水印制作
2017/01/07 PHP
laravel5.2实现区分前后台用户登录的方法
2017/01/11 PHP
PHP四种排序算法实现及效率分析【冒泡排序,插入排序,选择排序和快速排序】
2018/04/27 PHP
PHP实现基于3DES算法加密解密字符串示例
2018/08/24 PHP
基于laravel-admin 后台 列表标签背景的使用方法
2019/10/03 PHP
Laravel 读取 config 下的数据方法
2019/10/13 PHP
繁简字转换功能
2006/07/19 Javascript
jQuery 幻灯片插件(带缩略图功能)
2011/01/24 Javascript
AngularJS语法详解
2015/01/23 Javascript
基于javascript实现图片懒加载
2016/01/05 Javascript
js获取当前日期时间及其它日期操作汇总
2016/03/08 Javascript
js数组的五种迭代方法及两种归并方法(推荐)
2016/06/14 Javascript
vue多种弹框的弹出形式的示例代码
2017/09/18 Javascript
vue 自定义 select内置组件
2018/04/10 Javascript
vue短信验证性能优化如何写入localstorage中
2018/04/25 Javascript
video.js 实现视频只能后退不能快进的思路详解
2018/08/09 Javascript
vue项目从node8.x升级到12.x后的问题解决
2019/10/25 Javascript
[02:04]完美世界城市挑战赛秋季赛报名开始 谁是solo路人王?
2019/10/10 DOTA
Python map和reduce函数用法示例
2015/02/26 Python
在Python的Django框架中用流响应生成CSV文件的教程
2015/05/02 Python
Python循环语句中else的用法总结
2016/09/11 Python
对python 命令的-u参数详解
2018/12/03 Python
Django 自定义404 500等错误页面的实现
2020/03/08 Python
python实现粒子群算法
2020/10/15 Python
工程部经理岗位职责
2013/12/08 职场文书
教师实习自我鉴定
2013/12/18 职场文书
年检委托书
2014/08/30 职场文书
2014国庆节餐厅促销活动策划方案
2014/09/16 职场文书
领导班子四风对照检查材料
2014/09/23 职场文书
党员个人对照检查材料范文
2014/09/24 职场文书
一年级数学下册复习计划
2015/01/17 职场文书
安装pytorch时报sslerror错误的解决方案
2021/05/17 Python
SpringBoot系列之MongoDB Aggregations用法详解
2022/02/12 MongoDB
Python基本知识点总结
2022/04/07 Python