<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>