updateAvatar.vue 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
  1. <template>
  2. <view class="wrap">
  3. <view class="u-flex u-row-center">
  4. <u-avatar :src="pic" size="140"></u-avatar>
  5. </view>
  6. <view class="u-flex u-row-center u-margin-top-20 ">
  7. <u-upload :action="action" :deletable="false" :disabled="disabled" max-count="1" :custom-btn="true" :header="header" @on-success="uploadSuccess" @on-error="uploadError" >
  8. <view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
  9. <u-icon name="camera" size="50"></u-icon>
  10. </view>
  11. </u-upload>
  12. </view>
  13. </view>
  14. </template>
  15. <script>
  16. export default {
  17. data() {
  18. return {
  19. disabled:false,
  20. header: {
  21. Authorization: ''
  22. },
  23. action: '',
  24. pic: ''
  25. }
  26. },
  27. onLoad() {
  28. this.pic = this.vuex_avatar;
  29. this.header.Authorization = this.vuex_token;
  30. this.action = this.baseApi + '/user/uploadAvatar';
  31. },
  32. methods: {
  33. uploadSuccess(data) {
  34. const avatar =this.baseApi+'/file/getImgStream?idFile='+data.data.realFileName;
  35. this.$u.vuex('vuex_avatar',avatar);
  36. this.pic =avatar;
  37. this.disabled = true;
  38. },
  39. uploadError() {
  40. this.$u.toast('上传头像失败');
  41. }
  42. }
  43. }
  44. </script>
  45. <style lang="scss" scoped>
  46. </style>