vue + multer+mongodb实现文本加图片上传功能

前端代码：

<template>
    <div>
        <form name="fileinfo" id="myForm">
            标题：
            <input type="text" name="title" v-model="formData.title">
            内容：
            <input type="text"  name="content" v-model="formData.content">
            <input type="file" name="files" multiple>
            <button class="btn btn-default" @click="upload" type="button">提交</button>
        </form>
    </div>
</template>
<script>
export default {
    data() {
        return {
            formData: {}
        };
    },
    methods: {
        upload() {
            //获取表单数据
            var form = document.forms.namedItem("fileinfo");
            var form = document.getElementById("myForm");
            //创建表单对象，并添加数据
            //使用这种方法创建的表单后台必须有相应的设置,我后面设置的是（upload.array('files',10))，否则无法 获取数据
            var sumData = new FormData(form);
            //添加用户名
            sumData.append("userName", "userInfo.userName");
            const head = {
                header: {
                    "Content-type": "multipart/form-data"
                }
            };
            this.axios
                .post("/user/addFun", sumData, head)
                .then(res => {
                    if (res.data.status == "success") {
                        this.formData = {};
                        console.dir("成功");
                    } else {
                        console.log("失败");
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        }
    }
};
</script>
<style lang="less" scoped>
</style>

前端代码注意事项：

1、表单中的input标签中的name属性是你需要提交到后台的字段名，比如我这里提交的字段名为 title、content、和files(文件)

2、获取表单数据：var form = document.getElementById("myForm");

3、创建表单对象，添加表单数据：var sumData = new FormData(form);

4、设置请求的格式为form-data.

            const head = {
                header: {
                    "Content-type": "multipart/form-data"
                }
            };

5、发送请求（这里的接口自己写，我就不简述了）

           this.axios
                .post("/user/addFun", sumData, head)
                .then(res => {
                    if (res.data.status == "success") {
                        this.formData = {};
                        console.dir("成功");
                    } else {
                        console.log("失败");
                    }
                })
                .catch(err => {
                    console.log(err);
                });

这里res.data.status中的status是我后台自定义的一个变量，请根据自己的实际情况修改。

前端代码完毕，接下来看后台代码。

后台代码：

这里我使用的是模块化开发，下面是不同模块文件

后台使用node实现

1、配置multer

multer是一个node的上传文件的模块，这里不再讲述，小伙伴们可以去看官方文档:https://www.npmjs.com/package/multer

直接上代码：

multer.js模块（配置上传文件）

const multer = require('multer')
const date = new Date()

const storage = multer.diskStorage({
  //函数方式设置路径，必须先创建文件夹
  // destination: function (req, file, cb) {
  //   const date = new Date()
  //   const year = date.getFullYear()
  //   const month = date.getMonth() + 1
  //   cb(null, 'public/upload/images')
  // },

  //路径直接给字符串可以先不用创建文件,multer自动创建
  //根据日期创建，防止文件夹达到最大数量的文件
  destination: 'public/upload/' + 'images_' + date.getFullYear() + '_' + (date.getMonth() + 1),

  // 给上传文件重命名，获取添加后缀名
  filename: function (req, file, cb) {
    console.log("后台文件");
    console.log(file)
    const arry = file.originalname.split(".")
    const length = arry.length
    const newName = arry[0] + Date.now() + '.' + arry[length - 1]
    console.log("新名称");
    console.log(newName);
    cb(null, newName)
  }
});
const upload = multer({
  storage: storage
});
module.exports = upload

2、路由模块

router.js

const express = require('express')
const router = express.Router()
const upload = require('../utils/multer')

//数据库对象
const Fun = require('../lib/mongodb/controller/fun')

router.post('/user/addFun', upload.array('files', 20), Fun.addFun) //路由
module.exports = router

这里的Fun是数据库的操作

multer中多个文件上传使用array()

3、数据操作

fun.js (controller) 

//这里是导入mongoose数据模型
const FunModuls = require('../models/Fun')

class Fun {
  constructor() {

  }
async addFun(req, res, next) {
    //文本数据
    const body = req.body
    //文件数组
    const files = req.files
    //接收文件名的数组
    const images = []
    //对图片进行处理
    const isImage = 1;
    try {
      if (files) {
        for (var i = 0; i < files.length; i++) {
          if (!(files[i].mimetype == 'image/jpeg' || files[i].mimetype == 'image/jpg' || files[i].mimetype == 'image/png' || files[i].mimetype == 'image/gif')) {
            isImage = 0;
            break;
          }
        }
        if (!isImage) { //存在一张不符合就返回错误信息
          res.send({
            status: 'error',
            message: '图片格式错误'
          })
        } else { //格式全部正确,将文件路径保存到数组中，后面存入数据库
          files.forEach(item => {
            const fileName = 'public/upload/images_' + date.getFullYear() + '_' + (date.getMonth() + 1) + '/'
            images.push(fileName + item.filename)
          })
        }
      }
      //添加图片到传入数据库的对象中
      body.photo = images;
      await FunModuls.create(body)
      res.send({
        status: 'success',
        message: '添加成功'
      })
    } catch (err) {
      console.log(err)
      res.send({
        status: 'error',
        message: '输入数据格式有误，请刷新后重新输入'
      })
    }
  }

}
module.exports = new Fun()

基本思路就是这样，如果对mongoose不熟悉的小伙伴可能看着这里比较迷茫。

欢迎讨论和指出错误，觉得对你有帮助的小伙伴点个赞