Vue二级联动以及上传图片

在Dal层写

        public List<TypeInfo> BindList(int cid)
        {
            try
            {
                return shopDbContext.TypeInfos.Where(a => a.Cid == cid).ToList();
            }
            catch (Exception)
            {

                throw;
            }
        }

在Bll层写

        public List<TypeInfo> BindList(int cid)
        {
            try
            {
                return shopInfoDal.BindList(cid);
            }
            catch (Exception)
            {

                throw;
            }
        }

在控制器写

        public ActionResult BindList(int cid)
        {
            try
            {
                return Json(bll.BindList(cid),JsonRequestBehavior.AllowGet);
            }
            catch (Exception)
            {

                throw;
            }
        }

在视图中写

            //一级
            SelectList() {
                axios.get('/ShopInfo/BindList', {
                    params: {
                        cid: this.cid
                    }
                }).then(res => {
                    this.BindList = res.data;
                    this.BindList.unshift({ "Tid": "0", "Tname": "请选择" });
                })
            },
            //二级
            SelectBind() {
                if (this.FromData.Tid > 0) {
                    axios.get('/ShopInfo/BindList?cid=' + this.FromData.Tid).then(res => {
                        this.BindSelect = res.data;
                    })
                }
                else {
                    this.BindSelect = [];
                }

            },

Input表单内写

            <td>
                <span>分类</span>
                <select v-model="FromData.Tid" v-on:change="SelectBind">
                    <option v-for="(item,index) in BindList" :value="item.Tid" >{{item.Tname}}</option>
                </select>
                <span>品牌</span>
                <select v-model="FromData.Pin">
                    <option v-for="(item,index) in BindSelect" :value="item.Tid">{{item.Tname}}</option>
                </select>
            </td>

上传图片在控制器内写

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

在视图内写

            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('/ShopInfo/UpLoad', fd, /*config*/).then(res => {
                    if (res.data.code > 0) {
                        this.FromData.Spicture = res.data.fileName;
                        alert('上传成功 ');
                    }
                    else {
                        alert('上传失败');
                    }
                })
            }