VUE上传图片、二级联动

一、二级联动

  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. 效果如下:

VUE上传图片、二级联动

 

 VUE上传图片、二级联动

 

 VUE上传图片、二级联动

 

 

二、上传图片

  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>
上一篇:mybatis中一对多的处理使用结果嵌套查询


下一篇:服务器CPU占用率过高检查步骤