vue3.0加MongoDB加node的后台管理系统（四）

接下来到了设计注册页面的时候
首先第一步先定义用户头像上传的接口

引入文件上传模块formidable
引入fs模块用于与文件系统进行交互

npm install formidable
npm install fs

const fs = require('fs')
const formidable = require('formidable')

然后定义上传接口

//上传头像接口
router.post('/file_upload', AuthToken(), function (req, res) {
   
  var form = new formidable.IncomingForm();
  // form.uploadDir = path.join(__dirname, '../../static/'); //文件保存的临时目录为static文件夹（文件夹不存在会报错，一会接受的file中的path就是这个）
  form.maxFieldsSize = 2 * 1024 * 1024; //用户头像大小限制为最大1M    
  form.keepExtensions = true; //使用文件的原扩展名  
  form.parse(req, function (err, fields, file) {
   
    var filePath = '';
    //如果提交文件的form中将上传文件的input名设置为file，就从file中取上传文件。否则取for in循环第一个上传的文件。  
    if (file.file) {
   
      filePath = file.file.path;
    } else {
   
      for (var key in file) {
   
        if (file[key].path && filePath === '') {
   
          filePath = file[key].path;
          break;
        }
      }
    }
    var targetDir = path.join(__dirname, '../static/uploads');
    if (!fs.existsSync(targetDir)) {
   
      fs.mkdir(targetDir);
    }
    var fileExt = filePath.substring(filePath.lastIndexOf('.'));
    //判断文件类型是否允许上传  
    if (('.jpg.jpeg.png').indexOf(fileExt.toLowerCase()) === -1) {
   
      var err = new Error('此文件类型不允许上传');
      res.json({
   
        code: 1001,
        msg: '此文件类型不允许上传'
      });
    } else {
   
      // 以时间戳对当前的上传图片进行命名
      var fileName = new Date().getTime() + fileExt;
      var targetFile = path.join(targetDir, fileName);
      fs.copyFile(filePath, targetFile, 0, (err) => {
   
        if (err) {
   
          res.json({
   
            code: 1001,
            msg: '操作失败'
          });
        } else {
   
          var fileUrl = 'http://' + req.headers.host + '/static/uploads/' + fileName;
          res.json({
   
            code: 1000,
            fileUrl: fileUrl,
            msg: '上传成功'
          });
        }
      })
    }
  })
})

然后定义注册页面，我使用的是Ant Design Vue 使用表单组件加弹出框，进行注册

<template>
  <a-modal :title="title"
           :maskClosable='false'
           v-model:visible="visible"
           :destroyOnClose="true"
           :footer="null"
           :confirm-loading="confirmLoading">
    <a-form ref="ruleForm"
            :model="form"
            :rules="rules"
            :label-col="labelCol"
            :wrapper-col="wrapperCol">
      <a-form-item ref="username"
                   label="账号名称"
                   v-bind="validateInfos.username"
                   name="username">
        <a-input v-model:value="form.username" />
      </a-form-item>
      <a-form-item label="账号密码"
                   v-bind="validateInfos.password"
                   name="password">
        <a-input v-model:value="form.password"
                 placeholder="请输入账号密码" />
      </a-form-item>
      <a-form-item label="联系人"
                   v-bind="validateInfos.phonename"
                   name="phonename">
        <a-input v-model:value="form.phonename"
                 placeholder="请输入联系人" />
      </a-form-item>
      <a-form-item label="联系方式"
                   v-bind="validateInfos.phone"
                   name="phone">
        <a-input v-model:value="form.phone"
                 placeholder="请输入联系方式" />
      </a-form-item>
      <a-form-item label="权限"
                   v-bind="validateInfos.jurisdiction"
                   name="jurisdiction">
        <a-select v-model:value="form.jurisdiction">
          <a-select-option v-for="(item,index) in obj"
                           :key="index"
                           :value="item.key"
                           :label='item.value'>
            {
  {item.value}}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item v-bind="validateInfos.img"
                   label="上传头像"
                   name='img'>
        <a-upload v-model:fileList="fileList"
                  name="avatar"
                  action='#'
                  list-type="picture-card"
                  class="avatar-uploader"
                  :show-upload-list="false"
                  :beforeUpload="beforeUpload"
                  @change="handleChanges">
          <img v-if="form.img"
               :src="form.img"
               class="img"
               alt="avatar" />
          <div v-else>
            <!-- todo -->
            <loading-outlined v-if="loading" />
            <plus-outlined v-else />
            <div class="ant-upload-text">Upload</div>
          </div>
        </a-upload>
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
        <a-button type="primary"
                  @click="onSubmit">
          确定
        </a-button>
        <a-button style="margin-left: 10px;"
                  @click="resetForm">
          取消
        </a-button>
      </a-form-item>
    </a-form>
  </a-modal>
  <a-button class="editable-add-btn"
            type="primary"
            @click="handleAdd">
    新增账号
  </a-button>
</template>

<script>
import {
    onMounted, reactive, toRefs, inject, getCurrentInstance } from 'vue'
import {
    useForm } from '@ant-design-vue/use';
import {
    PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue';
import {
    message } from 'ant-design-vue';
import axios from 'axios'