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' }); } }); } }); }, }
相关文章推荐
- 完成一个个人博客,博客头像可上传本地图片;部分图片实现点击看大图功能
- 混合App应用实现本地头像剪切,压缩上传功能(支持任何H5框架)
- 使用jquery无刷新上传图片,可用于头像预览功能
- uni-app实现图片和视频上传功能
- uni-app实现图片和视频上传功能
- 实现图片上传前本地预览功能之二
- 用户上传本地磁盘中的一个图片文件作为头像
- JS实现多张图片预览同步上传功能
- 图片预览、上传、剪裁(类似于CSDN的头像上传功能)
- Android实现本地上传图片并设置为圆形头像
- PHP中ajax无刷新上传图片与图片下载功能
- 如何用 React 完成图片上传功能
- uniapp--上传图片
- Android实现本地上传图片并设置为圆形头像
- PHP实现本地图片的上传和验证功能
- TinyMCE 新增本地图片上传功能
- swfupload+imgareaselect打造头像图片在线编辑无刷新上传
- TinyMCE的使用(包括汉化及本地图片上传功能)
- 牛腩购物32:完成整个网站的功能制作(后台产品列表,多表查询+分页),产品修改保存,图片的上传保存
- 用户上传本地磁盘中的一个图片文件作为头像