<van-uploader :after-read="onRead">
<img :src="userInfo.avatar" :key="userInfo.avatar" alt="你的头像">
<!-- 用来更新头像,去掉会导致上传后头像无法及时更新,只有多加这个副本才能监听到头像变化,可能是个组件的bug -->
<img v-show="false" :src="avatar2" :key="avatar2 + '1'">
</van-uploader>
userInfo: {
avatar: "",
},
avatar2: "",
// 上传头像
onRead(file) {
let params = new FormData(); //创建form对象
params.append("file", file.file); //通过append向form对象添加数据//第一个参数字符串可以填任意命名,第二个根据对象属性来找到file
let config = {
headers: { //添加请求头
Authorization:
"Bearer " + window.localStorage.getItem("managementToken"),
"Content-Type": "multipart/form-data"
}
};
let url = "";
axios.post(url, params, config).then(res => {
console.log(res);
this.userInfo.avatar=res.avatar
this.avatar2=res.avatar
}).catch(err => {
console.log(err)
});
},
网友评论