Vue二级联动上传图片

1. 二级联动的后台和之前一样都需要一个字典字段查询来实现二级联动

2. 但是由于VUE语法和AJAX的不同在前台绑定的时候也有所不同

   2.1 首先下拉框的写法就有了本质的改变通过v-model=""和v-on:change=""来代替之前id=""和onchange=""的写法循环添加也变成了把数据填到我们定义的数组中然后在option中来循环绑定

   <tr>
               <td>所属分类</td>
               <td>
                   <select v-model="CommodData.ComTypeID" v-on:change="getBrand" >
                       <option v-for="(item,index) in classifys" :value="item.ComTypeID">{{item.ComTypeName}}</option>
                   </select>
               </td>
           </tr>
           <tr>
               <td>品牌</td>
               <td>
                   <select v-model="CommodData.BrandID" >
                       <option v-for="(item,index) in brands" :value="item.ComTypeID">{{item.ComTypeName}}</option>
                   </select>
               </td>
           </tr>

   2.2script里在基本的VUE框架里我们要定义数组用来接收我们收到的集合,然后在methods里写我们的加载下拉框的方法,两个下拉框的方法是分开的:首先加载第一层下拉框先定义个方法在方法里用 axios.get的方法从控制器的方法里获得数据,再把数据保存在我们定义的数组里,然后再添加一条数据请选择的数据然后是第二层下拉框获取数据然后把数据填到数组里都一样但是在一开始我们要先判断一下第一层下拉框的值是否大于零如果不大于就给数组赋一个空值,还要多写一个将品牌变成请选择的语句,具体代码以下:

   <script>
       let app = new Vue({
           el: "#app",
           data() {
               return {
                   classifys: [],//分类
                   brands: []//品牌
                   
               }
           },
           methods: {
               //加载分类下拉框
               getClassify() {
                   axios.get('/Commodity/GetSelect?pid=0').then(res => {
                       this.classifys = res.data;
                       this.classifys.unshift({ "ComTypeID": "0", "ComTypeName": "请选择" });
                   });
               },
               //加载品牌下拉框
               getBrand() {
                   if (this.CommodData.ComTypeID > 0) {
                       axios.get('/Commodity/GetSelect?pid=' + this.CommodData.ComTypeID).then(res => {
                           this.brands = res.data;
                           this.brands.unshift({ "ComTypeID": "0", "ComTypeName": "请选择" });
                           this.CommodData.BrandID = 0//将品牌变成请选择的状态
                       })
                   }
                   this.brands = [];
               }
           },
           created: function () {
               this.getClassify();
           }
       })
   </script>

   1. VUE上传图片

      首先 上传图片的控件是

      <input type="file" value=""  v-on:change="upLoad" />

      然后定义一个上传图片的方法

      upLoad(event) {
                      //获取图片
                      let file = event.target.files[0];
                      //配置头部类型
                      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)
                          }
                      })
                  }

      后台也要有一个对应的方法

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