Javascript

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上传图片、二级联动的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!