cropper-avatar.js 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
  1. // pages/me/cropper-avatar.js
  2. const util = require("../../utils/util");
  3. const api = require('../../utils/o2Api.js');
  4. const Multipart = require('../../components/multipart/Multipart.min.js');
  5. Page({
  6. /**
  7. * Page initial data
  8. */
  9. data: {
  10. src:'',
  11. width: 250,//宽度
  12. height: 250,//高度
  13. max_width: 400,
  14. max_height: 400
  15. },
  16. /**
  17. * Lifecycle function--Called when page load
  18. */
  19. onLoad: function (options) {
  20. //打开当前页面 直接 本地图片选择
  21. this.cropper = this.selectComponent("#image-cropper");
  22. this.cropper.upload();//选择图片
  23. },
  24. cropperload(e) {
  25. console.log('cropper加载完成');
  26. },
  27. //重制图片加载
  28. loadimage(e){
  29. wx.hideLoading();
  30. this.cropper.imgReset();
  31. },
  32. //选择本地图片进行裁剪
  33. chooseImage(){
  34. let that = this;
  35. wx.chooseImage({
  36. count: 1,
  37. sizeType: ['original', 'compressed'],
  38. sourceType: ['album', 'camera'],
  39. success(res) {
  40. wx.showLoading({
  41. title: '加载中',
  42. })
  43. const tempFilePaths = res.tempFilePaths[0];
  44. //重置图片角度、缩放、位置
  45. that.cropper.imgReset();
  46. that.setData({
  47. src: tempFilePaths
  48. });
  49. }
  50. })
  51. },
  52. // 提交图片
  53. submit(){
  54. this.cropper.getImg((obj)=>{
  55. const tempFilePath = obj.url;
  56. console.log('裁剪完成,,', tempFilePath);
  57. var who = wx.getStorageSync('who');
  58. var tokenName = wx.getStorageSync('tokenName');
  59. var token = '';
  60. if (who && who.token) {
  61. token = who.token;
  62. }
  63. let m=new Multipart({files:[], fields:[]})
  64. m.file({
  65. filePath: tempFilePath,
  66. name: 'file'
  67. })
  68. m.submit(api.uploadMyAvatarUrl(),
  69. {
  70. method: 'PUT',
  71. header: {
  72. tokenName: token
  73. }}).then(res => {
  74. const data = res.data
  75. console.log('上传头像完成', data);
  76. if (data.type == 'error') {
  77. util.toast('上传失败!');
  78. }
  79. wx.navigateBack({
  80. delta: -1
  81. })
  82. }).catch(err => {
  83. console.log('上传头像失败', err);
  84. util.toast('上传失败!');
  85. wx.navigateBack({
  86. delta: -1
  87. })
  88. })
  89. });
  90. },
  91. /**
  92. * Lifecycle function--Called when page is initially rendered
  93. */
  94. onReady: function () {
  95. },
  96. /**
  97. * Lifecycle function--Called when page show
  98. */
  99. onShow: function () {
  100. },
  101. /**
  102. * Lifecycle function--Called when page hide
  103. */
  104. onHide: function () {
  105. },
  106. /**
  107. * Lifecycle function--Called when page unload
  108. */
  109. onUnload: function () {
  110. },
  111. /**
  112. * Page event handler function--Called when user drop down
  113. */
  114. onPullDownRefresh: function () {
  115. },
  116. /**
  117. * Called when page reach bottom
  118. */
  119. onReachBottom: function () {
  120. },
  121. /**
  122. * Called when user click on the top right corner to share
  123. */
  124. onShareAppMessage: function () {
  125. }
  126. })