微信公众号小程序_node+vue完成用户注册和头像上

node+vue实现用户注册和头像上传的实例代码       本篇文章主要介绍了node+vue实现用户注册和头像上传的实例代码,具有一定的参考价值,有兴趣的可以了解一下

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

注册的步骤:

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

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

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

前端上传代码如下:

 template 
 div 
 !-- 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="注册" @click="submit()" 
 !-- /form -- 
 /div 
 /template 

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 ingForm();
 //文件的编码格式
 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;

相关阅读