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

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

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

数据库我使用的是MongoDB。

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

注册的步骤:

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

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

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

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

前端上传代码如下:

用户名

密码

重复密码

yfVqGzlpm

昵称

性别

男

女

头像

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

个人介绍

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

})

};

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。