Vue.二级联动+Vue上传图片

一、多级联动后台代码与EF Code First其他方法一至

 //二级联动
       public List<GTYpe> GTYpe(int id)
        {
            return db.GTYpe.Where(p => p.GPId == id).ToList();
        }

二、前台视图代码

//钩子函数
        created: function () {
            this.getBrand()
        },
        data() {
            return {
                proData: {  //产品添加
                    GCode: "",
                    GName: "",
                    GPId: "0",
                    GTId: "0",
                    XPrice: "",
                    SPrice: "",
                    Num: "",
                    Uptime: "",
                    Gsta: "",
                    ImgUrl:""
                },
                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 = [];
            },

三、上传文件控制器

//文件上传
        [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);
            }
        }

四、上传文件视图页

//上传图片
            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)
                    }
                })


               
            },