记录Vue 头像上传功能，本地路径读取方式：

知识总结

// 这里是input file 的onchange事件
myHeadFile: function (e) { 
    const file = e.srcElement.files[0]
    // imgURL就是你的图片的本地路径，两步就能解决问题
    const imgURL = window.URL.createObjectURL(file) 
}

DEMO分享

演示地址：http://test.jensonhui.top/uploadHeaderImg.html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>头像上传练习DEMO</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <style>
        *{margin:0;padding:0;}
        html,body{font-size:14px;color:#333;background-color:#fff;}
        ul li{list-style: none;}
        .clearfix::after{content:".";display:block;height:0;clear:both;visibility:hidden}
        .headbox {width:1000px;height:400px;margin: 50px auto;}
        .headbox .headerimg,.headbox .uploadfile{float:left;}
        .headbox .headerimg{width:30%;height:100%;padding:75px 20px;box-sizing: border-box;}
        .headbox .headerimg .imgshow{position: relative;width:130px;height: 130px;margin:0 auto;border-radius: 50%;border:1px solid #ccc;overflow: hidden;}
        .headbox .headerimg .imgshow img,.headbox .uploadfile ul > li img{width:100%;height:100%;}
        .headbox .uploadfile{position:relative;width:68%;height:100%;border: 1px solid #ccc;}
        .headbox .uploadfile ul li,.headbox .uploadfile .uploasbtn{width:80px;height:80px;border:1px solid #ccc;border-radius:15px;overflow: hidden;text-align:center;margin:5px;cursor:pointer;}
        .headbox .uploadfile ul li{float:left;}
        .headbox .uploadfile .surebtn{position:absolute;bottom:10px;right:20px;}
        .headbox .uploadfile .surebtn input[type="button"]{outline:none;border:1px solid #ccc;border-radius:10px; background-color:#fafafa;color:#333;padding:8px 25px;}
        .headbox .uploadfile .uploasbtn{position: relative;padding:20px 0;box-sizing: border-box;}
        .headbox .uploadfile .uploasbtn input[type="file"]{width:100%;height: 100%;position: absolute;top: 0;left: 0;opacity: 0;cursor: pointer;}
    </style>
</head>
<body>
    <div class="headbox" id="app">
        <form action="">
            <div class="headerimg">
                <div class="imgshow"> <img :src="headurl" alt=""> </div>
            </div>
            <ul class="uploadfile">
                <li>
                    <ul class="systemimg clearfix">
                        <li @click="changeHead" v-for="(item,index) in addList" :v-bind:data-url="item.imgurl"><img :src="item.imgurl" alt=""></li>
                    </ul>
                </li>
                <li class="uploasbtn">
                    <div><span> ＋ </span></div>
                    <div>点击上传</div>
                    <input @change="addNewImg" id="uploadNewbtn" class="Newimg" type="file" accept=".png,.jpg,.jpge">
                </li>
                <li class="surebtn">
                    <input type="button" value="确认">
                </li>
            </ul>
        </form>
    </div>
    <script>
        new Vue({
                el: "#app",
                data: {
                    headurl : "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2133044399,2992697155&fm=27&gp=0.jpg",
                    addList : [
                        { imgurl: "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1573099577,2750079042&fm=27&gp=0.jpg" },
                        { imgurl: "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1994202534,1905289809&fm=27&gp=0.jpg" },
                        { imgurl: "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2133044399,2992697155&fm=27&gp=0.jpg" },
                        { imgurl: "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2355087330,2927744035&fm=27&gp=0.jpg" },
                        { imgurl: "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2354934415,2297936184&fm=27&gp=0.jpg" },
                        { imgurl: "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3483038273,2552517787&fm=27&gp=0.jpg" },
                    ]
                },
                methods: {
                    // 本地上传路径获取
                    addNewImg(e){
                        const file = e.srcElement.files[0]
                        const imgURL = window.URL.createObjectURL(file);
                        this.addList.push({ imgurl : imgURL });
                    },
                    // 点击图库更换头像路径
                    changeHead(e){
                        var newFile = e.target.attributes.src.value;
                        this.headurl = newFile;
                    }
                }
            })
    </script>
</body>
</html>
文章目录