<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>
原文：https://www.cnblogs.com/xiaoxiao2017/p/10638183.html