小編給大家分享一下node+vue如何實現(xiàn)用戶注冊和頭像上傳，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

成都創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設、高性價比南充網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式南充網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設找我們，業(yè)務覆蓋南充地區(qū)。費用合理售后完善，10余年實體公司更值得信賴。

vue是什么

Vue是一套用于構建用戶界面的漸進式JavaScript框架，Vue與其它大型框架的區(qū)別是，使用Vue可以自底向上逐層應用，其核心庫只關注視圖層，方便與第三方庫和項目整合，且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)復雜的單頁應用。

數(shù)據(jù)庫我使用的是MongoDB。

首先做文件上傳，要保證協(xié)議里面的'Content-Type'為'multipart/form-data'。

注冊的步驟:

1. 將用戶名密碼，圖片等提交給node端

2. node端將圖片保存到服務器,圖片路徑及注冊用戶的個人信息保存到mongodb數(shù)據(jù)庫。

項目目錄如下，注冊功能只是其中的第一步:

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

前端上傳代碼如下:

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');//注冊信息插入數(shù)據(jù)庫的方法

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;

   //寫入數(shù)據(jù)庫的信息
  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) {
 })
};

以上是“node+vue如何實現(xiàn)用戶注冊和頭像上傳”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)網(wǎng)站建設公司行業(yè)資訊頻道！

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)建站www.cdcxhl.com，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

分享標題：node+vue如何實現(xiàn)用戶注冊和頭像上傳-創(chuàng)新互聯(lián)
當前網(wǎng)址：http://weahome.cn/article/coiopc.html