vue中点击头像切换图片

页面中

 <div class="adatar">
        <img :src="adatar ? adatar : require('../assets/wall-0.jpg')" alt />
        <input type="file" name accept="image/*" @change="fileChange" />
    </div>

js中写上

export default {
    name: 'adatar',
    data() {
        return {
            adatar: ''
        }
    },
    methods: {
        //头像选择
        fileChange(e) {
            var that = this;
            var file = e.target.files[0];
            var reader = new FileReader();
            reader.onload = function (e) {
                console.log(e);
                that.adatar = e.target.result;

            }
            reader.readAsDataURL(file);
            // localStorage.getItem('file')
        },
    }
}

css

.adatar {
    position: relative;
    width: 168px;
    height: 168px;
    img {
        object-fit: cover;
        object-position: center;
        width: 100%;
        height: 100%;
        border-radius: 50%;
    }
    input {
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        outline: none;
        opacity: 0;
        cursor: pointer;
        &:focus {
            box-shadow: none;
        }
    }
    button {
        width: 100%;
        height: 30px;
        margin-top: 20px;
        text-align: center;
        border: 1px solid #ccc;
        color: #fff;
        font-size: 14px;
        background: pink;
    }
}