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表单验证代码
Aug 02 Javascript
javascript实现分栏显示小技巧附图
Oct 13 Javascript
JavaScript代码复用模式详解
Nov 07 Javascript
Bootstrap每天必学之警告框插件
Apr 26 Javascript
AngularJS基础 ng-include 指令简单示例
Aug 01 Javascript
jQuery fadeOut 异步实例代码详解
Aug 18 Javascript
Vuex利用state保存新闻数据实例
Jun 28 Javascript
Vue 开发音乐播放器之歌手页右侧快速入口功能
Aug 08 Javascript
微信小程序-form表单提交代码实例
Apr 29 Javascript
react+redux仿微信聊天界面
Jun 21 Javascript
vue在线动态切换主题色方案
Mar 26 Javascript
vue-i18n实现中英文切换的方法
Jul 06 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模拟asp中的XmlHttpRequest实现http请求的代码
2011/03/24 PHP
php cli模式下获取参数的方法
2017/05/05 PHP
Aptana调试javascript图解教程
2009/11/30 Javascript
jQuery实现图片放大预览实现原理及代码
2013/09/12 Javascript
ExtJS4中的requires使用方法示例介绍
2013/12/03 Javascript
js图片滚动效果时间可随意设定当鼠标移上去时停止
2014/06/26 Javascript
nodejs 实现模拟form表单上传文件
2014/07/14 NodeJs
jQuery中:first-child选择器用法实例
2014/12/31 Javascript
JavaScript更改字符串的大小写
2015/05/07 Javascript
下一代Bootstrap的5个特点 超酷炫!
2016/06/17 Javascript
node.js中fs.stat与fs.fstat的区别详解
2017/06/01 Javascript
ES6新特性:使用export和import实现模块化详解
2017/07/31 Javascript
vue 标签属性数据绑定和拼接的实现方法
2018/05/17 Javascript
在 vue-cli v3.0 中使用 SCSS/SASS的方法
2018/06/14 Javascript
vue 设置路由的登录权限的方法
2018/07/03 Javascript
vue2.0页面前进刷新回退不刷新的实现方法
2018/07/31 Javascript
Vue开发环境跨域访问问题
2020/01/22 Javascript
解决Vue项目中tff报错的问题
2020/10/21 Javascript
[02:43]DOTA2英雄基础教程 圣堂刺客
2013/12/09 DOTA
Python中的异常处理相关语句基础学习笔记
2016/07/11 Python
python2.7实现爬虫网页数据
2018/05/25 Python
python学习--使用QQ邮箱发送邮件代码实例
2019/04/16 Python
Python 3 实现定义跨模块的全局变量和使用教程
2019/07/07 Python
在django admin中添加自定义视图的例子
2019/07/26 Python
tensorflow 实现数据类型转换
2020/02/17 Python
Python Opencv 通过轨迹(跟踪)栏实现更改整张图像的背景颜色
2020/03/09 Python
基于tf.shape(tensor)和tensor.shape()的区别说明
2020/06/30 Python
CSS3教程(10):CSS3 HSL声明设置颜色
2009/04/02 HTML / CSS
学生干部的自我评价分享
2014/01/18 职场文书
天地会口号
2014/06/17 职场文书
质量月口号
2014/06/20 职场文书
防溺水主题班会教案
2015/08/12 职场文书
2016新年问候语大全
2015/11/11 职场文书
使用HTML+Css+transform实现3D导航栏的示例代码
2021/03/31 HTML / CSS
win11无线投屏在哪设置? win11无线投屏功能的使用方法
2022/04/08 数码科技
mysql使用 not int 子查询隐含陷阱
2022/04/12 MySQL