您的位置:首页 > 移动开发

uni-app 完成图片上传同步刷新本地头像功能

2020-06-03 04:33 435 查看

直接上代码:

<view class="con_con con_first">
<view class="con_core">
<view class="con_core">
<P class="con_p1">
头像:
</P>
<view v-if="no_had_upload" class="con_item_person" @click="changePhoto"><image src="https://img.meidaojia.vip/shop/my_touxiangnan.png"></image></view>
<view v-if="had_upload" class="con_item_person" @click="changePhoto"><image :src="'https://api.meidaojia.vip'+new_person_photo"></image></view>
<view class="con_item_next"><image src="https://img.meidaojia.vip/shop/member_right_01.png"></image></view>
</view>
</view>
</view>
data() {
return {
had_upload:false,
no_had_upload:true,
new_person_photo:'',
}
},
methods:{
// 上传 更换 图片
changePhoto(){
var _this = this;
// 选择图片 获取图片路径
uni.chooseImage({
count: 1, //默认9
sizeType: [ 'compressed'], //可以指定是原图还是压缩图,默认二者都有
sourceType: ['album'], //从相册选择
success: function (res) {
// console.log(res.tempFilePaths)
uni.showLoading({
title: '上传图片',
mask: false
});
// 从本地获取图片完毕 上传
uni.uploadFile({
url: 'https://api.meidaojia.vip/api/manager/customer/upload',
filePath: res.tempFilePaths.toString(),
name: 'avatar',
formData: {
token : uni.getStorageSync('token'),
},
success: (res) => {
let datas = JSON.parse(res.data);
_this.new_person_photo = datas.data.path
_this.no_had_upload = false;
_this.had_upload = true;
},
fail: (e) => {
console.log("网络请求fail");
},
complete: () => {
console.log("网络请求complete");
uni.hideLoading();
uni.showToast({
title: '上传成功!',
icon: 'none'
});
}
});
}
});
},
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: