oracle vue帐号,node+vue实现用户注册和头像上传的实例代码

最近正好空闲，写了个实用注册代码，分享给大家，有需要的朋友可以了解一下

数据库我使用的是MongoDB。

首先做文件上传，要保证协议里面的'Content-Type'为'multipart/form-data'。

注册的步骤:

将用户名密码，图片等提交给node端

node端将图片保存到服务器,图片路径及注册用户的个人信息保存到mongodb数据库。

项目目录如下，注册功能只是其中的第一步:

前端框架使用的是vue.js，ajax使用的是vue的组件vue-resource。

前端上传代码如下:

用户名

请输入合适的用户名

密码

请输入符合规范的密码

重复密码

两次输入请保持一致

昵称

请输入昵称

性别

男

女

头像

//通过change事件获取到用户所要上传的图片

个人介绍

//首先现在组件中引入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];

}

}

}

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) {

})

};

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。