Vue添加--图片 二级联动

二级联动：

首先在数据处理层写对应语句，

   #region 分类
       public List<GTYpe> GTYpe(int id)
        {
            return db.GTYpe.Where(p => p.GPId == id).ToList();
        }
        #endregion

对应的在控制器进行调用之后

在vue里写对应的参数和方法：

 data() {
            return {
                
                brands: [],  //品牌
                classifys:[] //分类
            }
        }

 

methods: {
            //加载分类
            getBrand() {
                axios.get('/Info/GTYpe?id=0').then(res => {
                    this.brands = res.data;
                    this.brands.unshift({ "GTId": "0", "GTName": "请选择" });
                });
            },
            //加载品牌
            getClassify() {
                //this.proData.GTId>0  代表 点击的不是请选择
                if (this.proData.GTId>0) {
                    axios.get('/Info/GTYpe?id=' + this.proData.GTId).then(res => {
                        this.classifys = res.data;
                        this.classifys.unshift({ "GTId": "0", "GTName": "请选择" });
                        this.proData.GPId = 0;  //将品牌  变成 请选择状态
                    });
                }
                this.classifys = [];
            },

在挂载函数中调用第一级下拉

 created: function () {
            this.getBrand()
        }

在表单里写对应的v_model  v-for  循环输出

 <tr>
            <td>商品分类:</td>
            <td>
                分类:
                <select v-model="proData.GTId" v-on:change="getClassify">
                    <option v-for="(item,index) in brands" :value="item.GTId">{{item.GTName}}</option>
                </select>
                品牌:
                <select v-model="proData.GPId">
                    <option v-for="(item,index) in classifys" :value="item.GTId">{{item.GTName}}</option>
                </select>
            </td>
        </tr>

 

vue的图片上传：

首先在控制器里写一个图片上传的方法：

  [HttpPost]
        public ActionResult UpLoad()
        {
            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,fileName=file.FileName}, JsonRequestBehavior.DenyGet);


        }

在添加页面里，写对应的vue的方法：

  //文件上传
        [HttpPost]
        public ActionResult UpLoad()
        {
            try
            {
                //一、获取前台传过来的文件
                var file = Request.Files[0];
                //将虚拟路径转成物理路径
                var imgDir = Server.MapPath("/Images/");

                //判断你要存储的文件夹是否存在，不存在创建
                //需要引用System.IO
                if (!Directory.Exists(imgDir))
                {
                    //创建文件夹
                    Directory.CreateDirectory(imgDir);
                }
                //保存
                file.SaveAs(imgDir + file.FileName);
                return Json(new {code = 1,fileName = file.FileName,msg="" }, JsonRequestBehavior.DenyGet);
            }
            catch (Exception ex)
            {
                return Json(new { code = 0, fileName = "", msg =ex.Message },JsonRequestBehavior.DenyGet);
            }
        }

在vue里写对应的方法用来上传和接收

  //上传图片
            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('/Info/UpLoad', fd).then(res => {
                    if (res.data.code > 0) {
                        this.proData.ImgUrl = res.data.fileName;
                        alert('上传成功')
                    } else {
                        alert(res.data.msg)
                    }
                })


               
            },

在表单里修改对应的数据

<tr>
            <td>商品图:</td>
            <td><input type="file" value=""  v-on:change="upLoad" /></td>
        </tr>