Vue的二级联动和图片上传

一、后台操作

• 使用数据迁移Code First的方式去操作
• dal层绑定下拉框

public List<GoodsTypeModel> Bind(int id)
        {
            return db.GoodsTypes.Where(m => m.PId == id).ToList();
        }

• 控制器

[HttpGet]
        public ActionResult Bind(int id)
        {
            return Json(bll.Bind(id), JsonRequestBehavior.AllowGet);
        }

[HttpPost]
public ActionResult UpLoad()
{
try
{
//获取前台传过来的文件
var file = Request.Files[0];
//将虚拟路径转成物理路径
var imgDir = Server.MapPath("/Images/");
//判断你要存储的文件夹是否存在,不存在创建
if (!Directory.Exists(imgDir))
{
//创建文件夹
Directory.CreateDirectory(imgDir);
}
//保存
file.SaveAs(imgDir + file.FileName);
return Json(new { code = 1, filName = file.FileName,msg="" }, JsonRequestBehavior.DenyGet);
}
catch (Exception ex)
{
return Json(new { code = -1, filName = "" ,msg=ex.Message}, JsonRequestBehavior.DenyGet);
}
}

二、前台操作

1、页面布局

@{
ViewBag.Title = "AddGoods";
}
<script src="/Scripts/vue.js"></script>
<script src="/Scripts/axios.js"></script>
<h2>AddGoods</h2>

<div id="app">
<table class="table table-hover">
<tr>
<td>商品图</td>
<td>
<input type="file" name="name" value="" v-model="GoodsData.Img" v-on:change="upLoad"/>
</td>
</tr>
<tr>
<td>商品编号</td>
<td>
<input type="text" name="name" value="" v-model="GoodsData.Number"/>
</td>
</tr>
<tr>
<td>商品名称</td>
<td>
<input type="text" name="name" value="" v-model="GoodsData.Name"/>
</td>
</tr>
<tr>
<td>品牌</td>
<td>
<select v-model="GoodsData.PId">
<option v-for="(item,index) in binds" :value="item.TId">{{item.TName}}</option>
</select>
</td>
</tr>
<tr>
<td>商铺</td>
<td>
<input type="text" name="name" value="" v-model="GoodsData.Shop"/>
</td>
</tr>
<tr>
<td>所属分类</td>
<td>
<select v-model="GoodsData.TId" v-on:change="bindm">
<option v-for="(item,index) in bind" :value="item.TId">{{item.TName}}</option>
</select>
</td>
</tr>
<tr>
<td>销售价</td>
<td>
<input type="text" name="name" value="" v-model="GoodsData.SellPrice"/>
</td>
</tr>
<tr>
<td>市场价</td>
<td>
<input type="text" name="name" value="" v-model="GoodsData.MarketPrice"/>
</td>
</tr>
<tr>
<td>库存</td>
<td>
<input type="text" name="name" value="" v-model="GoodsData.Stock"/>
</td>
</tr>
<tr>
<td>重量</td>
<td>
<input type="text" name="name" value="" v-model="GoodsData.Weight"/>
</td>
</tr>
<tr>
<td>发布时间</td>
<td>
<input type="date" name="name" value="" v-model="GoodsData.CreateTime"/>
</td>
</tr>
<tr>
<td>上架状态</td>
<td>
<input type="radio" name="name" value="0" v-model="GoodsData.Status"/>未上架
<input type="radio" name="name" value="1" v-model="GoodsData.Status"/>上架
<input type="radio" name="name" value="2" v-model="GoodsData.Status"/>下架
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" name="name" value="添加" v-on:click="addGoods"/>
</td>
</tr>
</table>
</div>

 

2、操作

<script>
    let app = new Vue({
        el: "#app",
        data() {
            return {
                GoodsData: {
                    Img: "",
                    Number: "",
                    Name: "",
                    TId: "",
                    PId: "",
                    SellPrice: "",
                    MarketPrice: "",
                    Stock: "",
                    Weight: "",
                    CreateTime: "",
                    Status: "",
                    Shop: "",
                },
                bind: [],
                binds:[]
            }
        },
        methods: {
            addGoods() {
                axios.post('/Goods/AddGoods', this.GoodsData).then(res => {
                    if (res.data > 0) {
                        alert("添加成功");
                        location.href = '/Goods/ShowGoods';
                    }
                    else {
                        alert("添加失败");
                    }
                })
            },
            bindk() {
                axios.get('/Goods/Bind?id=0').then(res => {
                    this.bind = res.data;
                    this.bind.unshift({ "TId": "0", "TName": "请选择" });
                })
            },
            bindm() {
                if (this.GoodsData.TId > 0) {
                    axios.get('/Goods/Bind?id=' + this.GoodsData.TId).then(res => {
                        this.binds = res.data;
                        this.binds.unshift({ "TId": "0", "TName": "请选择" });
                        this.GoodsData.PId = 0;
                    })
                }
                this.binds = [];
            },
            upLoad(event) {
                let file = event.target.files[0];
                let config = {
                    headers: {
                        'Context-Type': "multipart / form - data"
                    }
                }
                let fd = new FormData();
                fd.append("file", file);
                axios.post('/Goods/UpLoad', fd).then(res => {
                    if (res.data.code == 1) {
                        alert("成功");
                        this.GoodsData.Img = res.data.filName;
                    }
                    else {
                        alert("失败");
                    }
                })
            }
        },
        created: function () {
            this.bindk();
        }
    })
</script>