前端
<template>
<div class="header">
<h1>{{ title }}</h1>
<hr />
<form enctype="multipart/form-data">
<ul>
<li>
<label for="product">商品</label>
<input type="text" v-model="data.name" name="name">
</li>
<li>
<label for="price">价格</label>
<input type="text" v-model="data.price" name="price">
</li>
<li>
<label for="salse">销量</label>
<input type="text" v-model="data.sales" name="sales">
</li>
<li>
<label for="img">图片</label>
<input type="file" name="img" multiple accept="image/*" id="file">
</li>
<li>
<label for="desc">描述</label>
<input type="text" v-model="data.desc" name="desc">
</li>
<li>
<label for="typename">类型</label>
<input type="text" v-model="data.typename" name="typename">
</li>
<li>
<button id="submit" @click="submit" type="button">提交</button>
<button id="reset" type="reset">重置</button>
</li>
</ul>
</form>
</div>
</template>
<script>
export default {
name: "ProductCreate",
data() {
return {
//表单提交数据
data: {},
title:'创建商品'
};
},
methods: {
submit: function () {
console.log(111)
//获取表单元素
var form=document.forms[0];
//表单序列化 Formata
var fd=new FormData(form);
//如果合法
this.$http.post('/api/food/add',fd)
.then((res)=>{
console.log(res)
})
.catch(()=>{
console.log('发送失败')
})
},
},
};
</script>
nodejs后端
//添加菜单
router.post('/add',(req,res)=>{
//实例化Formidable
var fd=new Formadible();
//设置上传路径
fd.uploadDir='./static/image';
//解析req对象
fd.parse(req,function(err,data,files){
if(err){
return res.send({
err:1,
data:'解析req对象失败'
})
}
//解析req成功
let {name,price,desc,typename,img,sales}=data;
//将上传图片名称修改为：us+图片后缀
console.log(files)
//获取文件后缀
var extName=files.img.name.split('.').pop();
var oldPath=files.img.path;
var newPath=fd.uploadDir+'/'+name+'.'+extName;
//修改文件名称
fs.rename(oldPath,newPath,(err)=>{
if(err){
res.send({
err:'1',
data:'修改图片名字失败'
})
}
//修改图片名字成功
img=newPath;
//插入数据库
let result={name,price,desc,typename,img,sales};
Food.insertMany(result)
.then((data)=>{
console.log(data)
res.send({
err:0,
data:'添加成功'
})
})
.catch(()=>{
res.send({
err:1,
data:'添加失败'
})
})
})
})
})
