调起相册上传图片

    <div id="box">
        <header class="weui-header">
            <a href="javascript:history.go(-1)" class="ui-icon ui-left">
                <span class="iconfont icon-back"></span>
            </a>
            <div class="hd-title">更换头像</div>
        </header>
        <div class="weui-content">
            <div class="upload-cells">
                <div class="upload-pic" id="result">
                    <img :src="head_pic" alt="" id="imgshow" />
                    <a href="javascript:;" class="upload-button button">
                        <input type="file" class="photo" accept="image/*" id="user" name="file" @change="photo"> 从相册选一张
                    </a>
                    <!-- <a href="javascript:;" class=" upload-button button">
                        <input type="file" class="camera" name="cover" accept="image/*" capture="camera" multiple
                            id="camera" @change="photo"> 拍一张照片
                    </a> -->
                </div>
            </div>
        </div>
    </div>

 

<script>
    var vm = new Vue({
        el: '#box',
        data: {
            token: "",
            head_pic: "",
        },
        created: function () {
            var that = this
            that.token = sessionStorage.getItem('token')
            that.head_pic = sessionStorage.getItem('head_pic')
            console.log(that.token)
        },
        methods: {
            photo: function () {
                var that = this
                var files = $("#user").get(0).files[0]; //获取file控件中的内容
                var reader = new FileReader();
                reader.readAsDataURL(files);
                reader.onload = function (f) {
                    var result = document.getElementById("result");
                    // console.log(this.result)
                    document.getElementById("imgshow").src = this.result;  //预览图片
                }
                var formData = new FormData();
                formData.append("head_pic", files);
                formData.append("token", that.token);
                // var data = {
                //  head_pic:files,
                //  token:that.token
                // }
                $.ajax({
                    type: "POST",
                    url: "http://qukuailian.txunda.com/Api/Member/uploadpic", //接口请求地址
                    processData : false,
                    contentType : false,
                    async:false,
                    data:formData,
                    success: function(data) {
                        console.log(3)
                        layer.msg(JSON.parse(data).message)
                        var data = JSON.parse(data);
                        console.log("请求成功之后，调用接口返回的数据");
                    }
                }); 
            },
        }
    });
</script>