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

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.jsvar User=require('../lib/mongo');module.exports={ create:function (useres) {  User.create(useres); }};

// lib/mongo.jsconst 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) { })};