VUE上传图片、二级联动

本文主要是介绍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. 效果如下:

二、上传图片

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>

这篇关于VUE上传图片、二级联动的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！