标签：Vue 联动 res data axios file 上传 下拉框
-
二级联动的后台和之前一样都需要一个字典字段查询来实现二级联动
-
但是由于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,联动,res,data,axios,file,上传,下拉框 来源： https://www.cnblogs.com/JWKK/p/15164822.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。