一、二級聯動

1. 定義兩個變數集合，寫兩個select，兩個都要v-model雙向繫結，在一級下拉框寫一個v-on:change繫結二級下拉框的方法，然後v-for迴圈option和繫結v-bind:value

2. 程式碼如下:

   <div id="app">
      <table class="table table-bordered">
        <tr>
          <td>商品分類:</td>
          <td>
            所屬分類:
            <select v-model="proData.TId" v-on:change="this.loadTwo">
              <option v-for="(item,index) in one" :value="item.TId">{{item.TName}}</option>
            </select>
            品牌:
            <select v-model="proData.PId">
              <option v-for="(item,index) in two" :value="item.TId">{{item.TName}}</option>
            </select>
          </td>
        </tr>
      </table>
   </div>
   <script>
      let app = new Vue({
        el: "#app",
        data() {
          return {
            proData: {
              PId: "0",
              TId: "0"
            },
            one: [],
            two: []
          }
        },
        methods: {
          loadOne() {
            axios.get('/GoodsInfo/GetGoodsTypeInfos?id=0').then(res => {
              this.one = res.data;
              this.one.unshift({ "TId": "0", "TName": "請選擇" });
            })
          },
          loadTwo() {
            if (this.proData.TId > 0) {
              axios.get('/GoodsInfo/GetGoodsTypeInfos?id=' + this.proData.TId).then(res => {
                this.two = res.data;
                this.two.unshift({ "TId": "0", "TName": "請選擇" });
                this.proData.PId = 0;
              })
            }
            this.two = [];
          }
        },
        created: function () {
          this.loadOne();
        }
      })
   </script>
    
   

3. 效果如下:

二、上傳圖片

1. 控制器程式碼

   //檔案上傳
        [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);
          }
        }
    
   

2. 前臺程式碼

   <div id="app">
      <table class="table table-bordered">
        <tr>
          <td>商品圖:</td>
          <td><input type="file" value="" v-on:change="upLoad" /></td>
        </tr>
      </table>
   </div>
   ​
   <script>
      let app = new Vue({
        el: "#app",
        data() {
          Picture: ""
        },
        methods: {
          //上傳圖片
          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('/GoodsInfo/UpLoad', fd).then(res => {
              if (res.data.code > 0) {
                this.Picture = res.data.fileName;
                alert('上傳成功')
              } else {
                alert(res.data.msg)
              }
            })
          }
        },
        created: function () {
   ​
        }
      })
   </script>