vue + node 同时上传文件和普通数据类型时前后端的处理办法，附带数据为[Object:null propotype]或[object Object]时的处理方法

网上找不到想要的确切的答案，碰到的问题远比我想象得多，只能参考着一些相关的回答自己边搞边悟，一直搞到搞到凌晨两点终于搞定了。现在来整合一下🐒
前端Vue代码：

data: function() {
	return {
		file: '你想上传的单个文件'，
		files: '你想上传的多个文件，是个数组'，
		userInfor: {
			name: '小明',
			hobbies: '唱，跳，rap，篮球'
		}//你想上传的普通数据
	}
}
methods: {
	async test() {
		let formData = new FormData()
		formData.append('picture', this.file)
		//上传单个文件时
		//this.files.forEach(element => {
		//	formData.append('pictures', element)
		//})
		//上传多个文件时
		formData.append('userInfor', JSON.stringfy(this.userInfor))
		//当只上传普通数据类型时，可以直接传this.userInfor这个对象，但是当上传混合数据类型时，必须将对象通过JSON.stringfy()转化为可读取的字符串，否则到了后端会无法读取[object Object]。
		const result = await axios.post('http://127.0.0.1:3000/xxx', {
			headers: {
				'Content-Type': 'multipart/form-data'
				//一定不要忘了配置请求头中的数据类型
			}
		})
		console.log(result)
	}
}

Node端代码

const multer = require('multer')
// const upload = multer({dest: 'uploads/images/'})
var storage = multer.diskStorage({
	//设置上传后文件路径，uploads文件夹会自动创建。
	destination: function (req, file, cb) {
		cb(null, 'public/')
	}, 
	//给上传文件重命名，获取添加后缀名
	filename: function (req, file, cb) {
		cb(null,  file.fieldname+'-'+Date.now()+file.originalname)
     }
 })
const upload = multer({storage: storage})
//以上是关于multer配置的操作###################################################

const exp = require('express')
const app = exp()
app.post('/xxx', upload.single('picture'), function(req, res) {
	console.log(req.file)
	//文件获取成功
	console.log(req.body)
	//此时打印出的请求体req.body为[Object:null propotype] {userInfor: [object Object]}
	//因此为了得到最终数据需进行进一步处理
	//对于[Object:null propotype]为了得到后面的数据可以对请求体进行JSON.stringfy()转换，再通过JSON.parse()转换为可读的JS对象 即：
	const ret = JSON.parse(JSON.stringfy(req.body))
	console.log(ret.userInfor)
	//此时打印出的仍然不是最终数据，因为前端传过来的是经JSON.stringfy()处理后的字符串而非对象，因此再调用一次JSON.parse()方法将其转换为真正的可读JS对象
	const finalResult = JSON.parse(ret.userInfor)
	console.log(finalResult)
	//普通数据获取成功
})

若前端传递的是多个文件则只需稍加改动

app.post('/xxx', upload.array('pictures', 9), function(req, res) {
	//此时收到的文件数据将会是一个数组而非一个单个对象，文件名后面的数字表示接收的最大数量，取决于实际需求，我这里是9
	console.log(req.files)
	//由req.file变为req.files,此时打印出来的是一个数组
	console.log(req.body)
	//后续操作同上
}

附加，对于传文件，以上囊括了两种情况：

1. 单个文件
2. 多个同名文件
3. 对于第三种情况即不同名的多个文件，需：

upload.fields([{name: 'pictures', maxcount: 9},{name: 'homework', maxcount: 2}])

有不靠谱的地方还望小伙伴们看到后指出🤭🤭