前端代码：
<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不熟悉的小伙伴可能看着这里比较迷茫。
欢迎讨论和指出错误，觉得对你有帮助的小伙伴点个赞