node+vue实现用户注册和头像上传的实例代码
时间:2019-03-30
本文章向大家介绍node+vue实现用户注册和头像上传的实例代码,主要包括node+vue实现用户注册和头像上传的实例代码使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
最近正好空闲,写了个实用注册代码,分享给大家,有需要的朋友可以了解一下
数据库我使用的是MongoDB。
首先做文件上传,要保证协议里面的'Content-Type'为'multipart/form-data'。
注册的步骤:
- 将用户名密码,图片等提交给node端
- 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) { }) };
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Linux下使用 github+hexo 搭建个人博客01-hexo搭建
- Linux下使用 github+hexo 搭建个人博客02-hexo部署到Github Pages
- Linux下使用 github+hexo 搭建个人博客03-hexo配置优化
- 接口测试框架实战(五) | 测试数据的数据驱动
- Linux下使用 github+hexo 搭建个人博客04-next主题优化
- Linux下使用 github+hexo 搭建个人博客05-next主题接入评论系统 来必力畅言Valine获取 livere_uid在Next主题配置浏览器访问数据
- Linux下使用 github+hexo 搭建个人博客06-next主题接入数据统计
- egg.js 动态转发代理
- Linux下使用 github+hexo 搭建个人博客07-next主题接入搜索和站点管理
- Linux curl 命令详解
- Linux curl 常用示例
- Linux curl 表单登录或提交与cookie使用
- Rsync 服务部署与参数详解
- Linux 查看磁盘IO并找出占用IO读写很高的进程
- Linux tcpdump 命令详解与示例