node+vue实现用户注册和头像上传的实例代码
程序员文章站
2022-05-26 08:24:43
最近正好空闲,写了个实用注册代码,分享给大家,有需要的朋友可以了解一下
数据库我使用的是mongodb。
首先做文件上传,要保证协议里面的'c...
最近正好空闲,写了个实用注册代码,分享给大家,有需要的朋友可以了解一下
数据库我使用的是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) { }) };
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
推荐阅读
-
Spring boot + LayIM + t-io 实现文件上传、 监听用户状态的实例代码
-
node+vue实现用户注册和头像上传的实例代码
-
基于Ajax和forms组件实现注册功能的实例代码
-
php同时使用session和cookie来保存用户登录信息的实现代码_php实例
-
请教Discuz!X开发者:如何挂钩代码,使得在用户上传头像的时候,执行特定的判断和操作动作?
-
利用jquery实现对上传文件的大小和类型进行验证实例代码
-
node+vue实现用户注册和头像上传的实例代码
-
利用jquery实现对上传文件的大小和类型进行验证实例代码
-
基于Ajax和forms组件实现注册功能的实例代码
-
JS实现用户注册时获取短信验证码和倒计时功能的示例代码分享