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>

巴特西

Vue添加--图片二级联动

二级联动：

vue的图片上传：

最新文章

热门文章

巴特西

Vue添加--图片 二级联动

二级联动：

vue的图片上传：

最新文章

热门文章

Vue添加--图片二级联动