Vue二级联动上传图片
二级联动的后台和之前一样都需要一个字典字段查询来实现二级联动
但是由于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>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二级联动上传图片的更多相关文章
- vue二级联动select
<div> <span>所在区域</span> <select name="" v-model="country"&g ...
- vue实现二级联动效果
你如城市与省份间的二级联动效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g ...
- iOS开发之"省市"二级联动的数据组织(PHP版)以及PickerView的实现与封装
之所以要发表这篇博客,还源于最近的开发工作所实现的一个小的Demo, 当然这个Demo不会涉及工作中App的一些内容,下方要实现的Demo是通用的.因为项目需求的迭代,要求在银行卡绑定中添加支行所在的 ...
- asp.net 使用DroDownList来实现二级联动
今天做新闻发布系统的时候,用到了二级联动,我把使用方法记录下来,以便日后查阅以及帮助新手朋友们.下面是效果图: 下面来讲解一下实现的方法: 1.在.aspx页面中,拖入两个DroDownList控件. ...
- Select标签下拉列表二级联动级联
首先从服务器端,绑定下拉列表,二级下拉的text命名按照一定规则加上一级下拉的ID. var options=new Array(); $(document).ready(function(){ // ...
- 通过Ajax异步提交的方法实现从数据库获取省份和城市信息实现二级联动(xml方法)
之前有写过是从JavaScript数组里获取省市信息来实现二级联动,但是似乎有很多需求是要从数据库里获取信息,所以就需要根据异步提交,局部刷新的思想来实现来提高用户交互问题 第一种方法是xml方法 1 ...
- 利用JavaScript来实现省份—市县的二级联动
所谓省-市二级联动是指当选择省份下拉选择框时,市县的下拉框会根据选择的省市而有相应的市县加载出来,如下图所示选择"上海市",城市的下拉选择框只会出现上海的市县: 这种二级联动非常常 ...
- 省市二级联动(原生JS)
代码如下: <html> <head> <meta charset="UTF-8"> <title>省市二级联动</title ...
- asp.net mvc jQuery 城市二级联动
页面效果图: 数据库表结构: 首先在数据库中创建省级.城市的表,我的表如下:我用了一张表放下了省级.城市的数据,用level划分省份和城市,parentId表示该城市所在省份的id 主要文件有:ind ...
- Dwz下拉菜单的二级联动
在DWZ文档中对组合框combox的是这样描述的: 在传统的select 用class 定义:class=”combox”, html 扩展:保留原有属性name, 增加了属性:ref. ref 属 ...
随机推荐
- 异步串口通信协议--UART
UART(通用异步收发传输器)将由计算机内部传送过来的并行数据转换为输出的串行数据流.将计算机外部来的串行数据转换为字节,供计算机内部使用并行数据的器件使用. 在输出的串行数据流中加入奇偶校验位,并对 ...
- python bottle小记
# coding=utf-8import bottle @bottle.route('/url/url', method=['GET','POST'])def big_data(): # 获取请求参数 ...
- 【git】git子模块操作-从子模块的远端拉取上游修改 & 从项目远端拉取更改
1.从子模块的远端拉取上游修改 1.1 在项目子模块目录中,运行git fetch与git merge更新本地代码 (1) 这种方法在获取子模块非master分支的更新时,没成功获取更新,没搞清楚原因 ...
- 智能风控:python金融风险管理与评分卡建模
Ch1 互联网金融的申请过程,通常由用户从移动端发起,首次贷款用户会经理申请.四要素验证.授信与额度利率定价.多层审批.用户提款等多个环节:对于还款后再次贷款的复贷客户,平台通常会基于更好的信用评估结 ...
- ES可视化平台kibana安装和使用
一.kibana介绍 Kibana是一个针对Elasticsearch的开源分析及可视化平台,用来搜索.查看交互存储在Elasticsearch索引中的数据. 二.kibana安装 1.解压 tar ...
- 富文本编辑器转word
https://blog.csdn.net/qq_41532872/article/details/108644773
- Unity中的深度测试相关知识与问题
https://www.jianshu.com/p/f420b55edd0b?utm_campaign=hugo
- select,poll和epoll使用场景和区别
阻塞I/O至I/O多路复用 阻塞I/O指进程发起调用后会被挂起(阻塞),直到收到数据再返回.如果调用一直不返回,进程就一直被挂起.因此,使用阻塞I/O需要利用多线程来处理多个文件描述符. 引入非阻塞I ...
- stream 链式结构
Double totalPaymentAmount = Optional.ofNullable(wayfairMonthBill.getPaymentAmountDetailJson()) .filt ...
- vue 页面嵌入pdf文件
1.pdf分页显示 2.没有分页