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);
          }
      }

Vue二级联动上传图片的更多相关文章

  1. vue二级联动select

    <div> <span>所在区域</span> <select name="" v-model="country"&g ...

  2. vue实现二级联动效果

    你如城市与省份间的二级联动效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g ...

  3. iOS开发之"省市"二级联动的数据组织(PHP版)以及PickerView的实现与封装

    之所以要发表这篇博客,还源于最近的开发工作所实现的一个小的Demo, 当然这个Demo不会涉及工作中App的一些内容,下方要实现的Demo是通用的.因为项目需求的迭代,要求在银行卡绑定中添加支行所在的 ...

  4. asp.net 使用DroDownList来实现二级联动

    今天做新闻发布系统的时候,用到了二级联动,我把使用方法记录下来,以便日后查阅以及帮助新手朋友们.下面是效果图: 下面来讲解一下实现的方法: 1.在.aspx页面中,拖入两个DroDownList控件. ...

  5. Select标签下拉列表二级联动级联

    首先从服务器端,绑定下拉列表,二级下拉的text命名按照一定规则加上一级下拉的ID. var options=new Array(); $(document).ready(function(){ // ...

  6. 通过Ajax异步提交的方法实现从数据库获取省份和城市信息实现二级联动(xml方法)

    之前有写过是从JavaScript数组里获取省市信息来实现二级联动,但是似乎有很多需求是要从数据库里获取信息,所以就需要根据异步提交,局部刷新的思想来实现来提高用户交互问题 第一种方法是xml方法 1 ...

  7. 利用JavaScript来实现省份—市县的二级联动

    所谓省-市二级联动是指当选择省份下拉选择框时,市县的下拉框会根据选择的省市而有相应的市县加载出来,如下图所示选择"上海市",城市的下拉选择框只会出现上海的市县: 这种二级联动非常常 ...

  8. 省市二级联动(原生JS)

    代码如下: <html> <head> <meta charset="UTF-8"> <title>省市二级联动</title ...

  9. asp.net mvc jQuery 城市二级联动

    页面效果图: 数据库表结构: 首先在数据库中创建省级.城市的表,我的表如下:我用了一张表放下了省级.城市的数据,用level划分省份和城市,parentId表示该城市所在省份的id 主要文件有:ind ...

  10. Dwz下拉菜单的二级联动

    在DWZ文档中对组合框combox的是这样描述的: 在传统的select 用class 定义:class=”combox”, html 扩展:保留原有属性name,  增加了属性:ref. ref 属 ...

随机推荐

  1. 微信小程序搜索排名权重!

    最后,再介绍一下排名权重的计算比例: 1.小程序上线时间(占比5%) 2.描述中完全匹配出现关键词次数越多,排名越靠前(10%) 3.标题中关键词出现1次,且整体标题的字数越短,排名越靠前(35%) ...

  2. 头条二面:宕机后,Redis如何实现快速恢复?

    Redis作为非常火热的内存数据库,其除了具有非常高的性能之外,还需要保证高可用,在故障发生时,尽可能地降低故障带来的影响,Redis也提供了完善的故障恢复机制:哨兵.下面就来具体来看看Redis的故 ...

  3. 看K线学炒股(8.10)

    今天大盘看起来疲软但强势的一天,收涨1.01%. 广东骏亚,现价21.39,看尾盘,这只票现在看还有下跌空间,但也有反弹可能,跌到21元以下均价上可加仓,博止跌反弹.现在60分钟线看有点阴雨绵绵的意思 ...

  4. vue 生命周期个人理解

    activated():在vue对象存活的情况下,进入当前存在activated()函数的页面时,一进入页面就触发:可用于初始化页面数据等: created():在模板渲染成html前调用,即通常初始 ...

  5. react native android9 axios network error

    react native 发布成apk后网络请求会报 network error 是因为android9以后http协议不能用,要用htts协议.需要改成配置能兼容http协议,修改信息如下: and ...

  6. Linux 看进程的线程数

    pstree -p 12345|wc -l 看进程的线程数 centos7默认并没有安装pstree,所以会有pstree:command not found 安装一下 yum install psm ...

  7. idea提交时忽略.class、.iml文件和文件夹或目录的方法

    第一种方法 在Setings–> Editor --> File Types -->Ignore files and folders中添加需要忽略的文件和文件夹: .idea 忽略 ...

  8. 049_Search Lookup (二)

    其实就是 在父object中 设置,search setting 中选中 enhanced lookup, and select the dialoge & Filter  默认looukp搜 ...

  9. postman导出Collection文件

    postman接口调用工具可以将曾经使用过的请求配置导出为文件保存,方法如下: 1.编写一个接口测试用例 2.按组分类 3.导出 参考来源: https://blog.csdn.net/IBLiplu ...

  10. CentOS 7.9 环境下部署 Docker 服务

    sudo setenforce Permissive sudo vi /etc/selinux/config SELINUX=permissive sudo systemctl stop firewa ...