前端程式碼：

<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.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不熟悉的小夥伴可能看著這裡比較迷茫。

歡迎討論和指出錯誤，覺得對你有幫助的小夥伴點個贊