Vue + express + multer实现注册的时候上传图片

项目使用elementUI框架，重点实现图片上传

前端部分

界面显示

图片部分的代码

Vue html部分代码

<template>
    <div class="container">
        <div class="form-container">
            <div style="text-align: center;margin-left: 100px"><h2>欢迎注册</h2></div>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="用户名" prop="name">
                    <el-col :span="24">
                        <el-input v-model="ruleForm.user_name"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="帐号" prop="account">
                    <el-col :span="24">
                        <el-input v-model="ruleForm.user_account"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-col :span="24">
                        <el-input type="password" v-model="ruleForm.user_password"></el-input>
                    </el-col>
                </el-form-item>
                <!--  使用elementUI的组件，具体请看elementUI的文档   -->
                <el-form-item label="头像" prop="avatar">
                    <el-upload
                            action="#"
                            list-type="picture-card"
                            ref="upload"
                            :multiple="false"
                            :limit="1"
                            :http-request="uploadImg"
                            :on-change="imgChange"
                            :auto-upload="false"
                            :on-preview="handlePictureCardPreview"
                            :on-remove="handleRemove">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item>
                    <el-button type="success" @click="submitForm('ruleForm')">立即注册</el-button>
                </el-form-item>
            </el-form>

        </div>
        <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
    </div>
</template>

Vue js部分代码

export default {
  data() {
    return {
      ruleForm: {
        user_name: '',
        user_account: '',
        user_password: '',
        avatar: '',
        avatar_url: ''
      },
      dialogImageUrl: '',
      dialogVisible: false,
      // 定义表单规则
      rules: {
        user_name: [
          {required: true, message: '请输入用户名', trigger: 'blur'}
          // {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
        ],
        user_account: [
          {required: true, message: '请输入帐号', trigger: 'blur'}
          // {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
        ],
        user_password: [
          {required: true, message: '请输入密码', trigger: 'blur'}
          // {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
        ],
        avatar: [
          {required: true, message: '请选择头像', trigger: 'blur'}
          // {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
        ],
      }
    };
  },
  methods: {
    // 点击提交后的事件
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          await this.$refs.upload.submit();
        } else {
          return false;
        }
      });
    },
    // 上传图片
    async uploadImg(file) {
      const imgFile = new FormData()
      imgFile.append('file', file.file)
      const {url} = await upload(imgFile)
      this.ruleForm.avatar_url = url
      this.create(this.ruleForm)
    },
    // 创建帐号
    async create(data) {
      const res = await create(data)
      if (res.success){
        this.$message.success('注册成功');
        location.href = '/login'
      }else {
        this.$message.error('该帐号已存在');
      }
    },
    // 图片修改的时候时候修改图片文件
    imgChange(file) {
      this.ruleForm.avatar = file.raw
    },
    // 删除图片
    handleRemove(file, fileList) {
      console.log(file, fileList);
      this.ruleForm.avatar = ''
    },
    // 查看图片
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    }
  }
}

至此前端主要部分完成，接口之类的可以自己定义

后台部分

multer的安装

安装npm install multer -save

使用

var multer = require('multer')

// 判断是否需要创建文件夹
var createFolder = function (folder) {
  try {
    fs.accessSync(folder);
  } catch (e) {
    fs.mkdirSync(folder);
  }
};

// public目录下的images文件夹
var uploadFolder = path.join(__dirname, '../', '/public/images');

createFolder(uploadFolder);

// 通过 filename 属性定制
var storage = multer.diskStorage({
  //确定图片存储的位置
  destination: function (req, file, cb) {
    cb(null, uploadFolder);    // 保存的路径，备注：需要自己创建
  },
  filename: function (req, file, cb) {
     // 将保存文件名设置为 时间戳 + 字段名 
    cb(null, Date.now() + '-' + file.originalname);
  }
});

// 通过 storage 选项来对 上传行为 进行定制化
var upload = multer({storage: storage})

router.post('/upload', upload.single('file'), function (req, res, next) {
  // req.file 是 `avatar` 文件的信息
  // req.body 将具有文本域数据，如果存在的话
  var file = req.file;
  // 返回图片的url
  res.json({
    url: `http://127.0.0.1:3000/images/${req.file.filename}`
  })
  // res.send({ret_code: '0'});
})

后端部分也完成了，接下来就可以进行上传图片保存到后台了