avatar.vue 2.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  1. <template>
  2. <view>
  3. <!-- 头像裁剪 -->
  4. <okingtz-cropper
  5. @uploadSuccess="uploadSuccess"
  6. selectButtonBackgroundColor="#2080f0"
  7. saveButtonBackgroundColor="#2080f0"
  8. :image="avatar"
  9. ></okingtz-cropper>
  10. </view>
  11. </template>
  12. <script>
  13. import OkingtzCropper from '@/uni_modules/okingtz-cropper/components/okingtz-cropper/okingtz-cropper';
  14. export default {
  15. components: {
  16. OkingtzCropper
  17. },
  18. data() {
  19. return {
  20. avatar: '/static/logo.png' // 头像地址
  21. };
  22. },
  23. onLoad() {
  24. const userInfo2 = uni.getStorageSync('MD_userInfo2')
  25. this.avatar = userInfo2.avatar
  26. },
  27. methods: {
  28. // 头像
  29. uploadSuccess(tempFilePath) {
  30. let token = uni.getStorageSync('MD_token') || ''
  31. uni.uploadFile({
  32. url: uni.baseUrl + 'api/upload/cloud',
  33. filePath: tempFilePath,
  34. name: 'upload',
  35. formData: {
  36. 'token': token
  37. },
  38. success: (res) => {
  39. const cData = JSON.parse(res.data)
  40. this.avatar = cData.data.url
  41. uni.api.base.apiuseredit({
  42. avatar: this.avatar
  43. }).then(res => {
  44. uni.api.base.apiuserinfo().then(res => {
  45. uni.setStorageSync('MD_userInfo2', res)
  46. })
  47. uni.$msgConfirm('编辑成功', () => {
  48. uni.reLaunch({
  49. url: '/pages/index/index'
  50. })
  51. }, () => {
  52. uni.reLaunch({
  53. url: '/pages/index/index'
  54. })
  55. })
  56. })
  57. }
  58. });
  59. // uni.api.base.apiuploadcloudpiv({
  60. // upload: tempFilePath
  61. // }).then(res => {
  62. // console.log(res)
  63. // })
  64. // 上传至 unicloud云储存
  65. // vk.callFunctionUtil.uploadFile({
  66. // title: '上传中...',
  67. // filePath: tempFilePath,
  68. // suffix: 'png', // 不传suffix会自动获取,但H5环境下获取不到后缀,但可以通过file.name 获取
  69. // success(res) {
  70. // // 上传成功
  71. // vk.userCenter.setAvatar({
  72. // data: {
  73. // avatar: res.url
  74. // },
  75. // success: function(data) {
  76. // // 成功后的逻辑
  77. // let currentTime = Date.parse(new Date()) / 1000; // 秒级
  78. // console.log(currentTime);
  79. // vk.vuex.set('$user.history.lastEditAvatarTime', currentTime); // 写入缓存
  80. // vk.alert('头像设置成功', '提示', '确定', function() {
  81. // // 点击确定按钮后的回调
  82. // vk.navigateToHome();
  83. // });
  84. // }
  85. // });
  86. // }
  87. // });
  88. }
  89. }
  90. };
  91. </script>
  92. <style></style>