cropper.vue 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. <template>
  2. <view class="container">
  3. <tui-picture-cropper :lockRatio="true" :imageUrl="imageUrl" @ready="ready" @cropper="cropper">
  4. </tui-picture-cropper>
  5. </view>
  6. </template>
  7. <script>
  8. export default {
  9. data() {
  10. return {
  11. src: '',
  12. imageUrl: '', //要裁剪的图片
  13. resimage: ''
  14. };
  15. },
  16. onLoad(options) {
  17. this.src = options.src || '';
  18. //如果从上个页面传值时可显示loading
  19. this.src &&
  20. uni.showLoading({
  21. title: '请稍候...',
  22. mask: true
  23. });
  24. },
  25. methods: {
  26. ready() {
  27. this.imageUrl = this.src;
  28. },
  29. cropper(e) {
  30. var _this = this;
  31. //裁剪完成后处理逻辑
  32. if (e.url) {
  33. this.$request.uploadFile(e.url).then(res => {
  34. //console.log(res);
  35. _this.resimage = res.url;
  36. _this.$request.post('member.update', {
  37. userpic: _this.resimage
  38. }).then(res => {
  39. if (res.errno == 0) {
  40. this.tui.href("/pagesA/my/userInfo/userInfo")
  41. }
  42. });
  43. });
  44. } else {
  45. console.log(e.base64)
  46. this.tui.toast('裁剪成功!查看控制台打印')
  47. }
  48. }
  49. },
  50. /**
  51. * 页面相关事件处理函数--监听用户下拉动作
  52. */
  53. onPullDownRefresh: function() {
  54. setTimeout(() => {
  55. uni.stopPullDownRefresh()
  56. }, 200);
  57. },
  58. };
  59. </script>
  60. <style></style>