标签：VUE 联动 res data let file TId new 上传

一、二级联动

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,联动,res,data,let,file,TId,new,上传
来源： https://www.cnblogs.com/666l/p/15163919.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。