userAvatar.vue 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175
  1. <template>
  2. <div>
  3. <div class="user-info-head" @click="editCropper()"><img v-bind:src="options.img" title="点击上传头像" class="img-circle img-lg" /></div>
  4. <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body @opened="modalOpened">
  5. <el-row>
  6. <el-col :xs="24" :md="12" :style="{height: '350px'}">
  7. <vue-cropper
  8. ref="cropper"
  9. :img="options.img"
  10. :info="true"
  11. :autoCrop="options.autoCrop"
  12. :autoCropWidth="options.autoCropWidth"
  13. :autoCropHeight="options.autoCropHeight"
  14. :fixedBox="options.fixedBox"
  15. @realTime="realTime"
  16. v-if="visible"
  17. />
  18. </el-col>
  19. <el-col :xs="24" :md="12" :style="{height: '350px'}">
  20. <div class="avatar-upload-preview">
  21. <img :src="previews.url" :style="previews.img" />
  22. </div>
  23. </el-col>
  24. </el-row>
  25. <br />
  26. <el-row>
  27. <el-col :lg="2" :md="2">
  28. <el-upload action="#" :http-request="requestUpload" :show-file-list="false" :before-upload="beforeUpload">
  29. <el-button size="small">
  30. 选择
  31. <i class="el-icon-upload el-icon--right"></i>
  32. </el-button>
  33. </el-upload>
  34. </el-col>
  35. <el-col :lg="{span: 1, offset: 2}" :md="2">
  36. <el-button icon="el-icon-plus" size="small" @click="changeScale(1)"></el-button>
  37. </el-col>
  38. <el-col :lg="{span: 1, offset: 1}" :md="2">
  39. <el-button icon="el-icon-minus" size="small" @click="changeScale(-1)"></el-button>
  40. </el-col>
  41. <el-col :lg="{span: 1, offset: 1}" :md="2">
  42. <el-button icon="el-icon-refresh-left" size="small" @click="rotateLeft()"></el-button>
  43. </el-col>
  44. <el-col :lg="{span: 1, offset: 1}" :md="2">
  45. <el-button icon="el-icon-refresh-right" size="small" @click="rotateRight()"></el-button>
  46. </el-col>
  47. <el-col :lg="{span: 2, offset: 6}" :md="2">
  48. <el-button type="primary" size="small" @click="uploadImg()">提 交</el-button>
  49. </el-col>
  50. </el-row>
  51. </el-dialog>
  52. </div>
  53. </template>
  54. <script>
  55. import store from "@/store";
  56. import { VueCropper } from "vue-cropper";
  57. import { uploadAvatar } from "@/api/system/user";
  58. export default {
  59. components: { VueCropper },
  60. props: {
  61. user: {
  62. type: Object
  63. }
  64. },
  65. data() {
  66. return {
  67. // 是否显示弹出层
  68. open: false,
  69. // 是否显示cropper
  70. visible: false,
  71. // 弹出层标题
  72. title: "修改头像",
  73. options: {
  74. img: store.getters.avatar, //裁剪图片的地址
  75. autoCrop: true, // 是否默认生成截图框
  76. autoCropWidth: 200, // 默认生成截图框宽度
  77. autoCropHeight: 200, // 默认生成截图框高度
  78. fixedBox: true // 固定截图框大小 不允许改变
  79. },
  80. previews: {}
  81. };
  82. },
  83. created() {
  84. // 显隐列组件默认隐藏列
  85. for (let item in this.columns) {
  86. if (this.columns[item].visible === false) {
  87. this.value.push(parseInt(item))
  88. }
  89. }
  90. },
  91. methods: {
  92. // 编辑头像
  93. editCropper() {
  94. this.open = true;
  95. },
  96. // 打开弹出层结束时的回调
  97. modalOpened() {
  98. this.visible = true;
  99. },
  100. // 覆盖默认的上传行为
  101. requestUpload() {
  102. },
  103. // 向左旋转
  104. rotateLeft() {
  105. this.$refs.cropper.rotateLeft();
  106. },
  107. // 向右旋转
  108. rotateRight() {
  109. this.$refs.cropper.rotateRight();
  110. },
  111. // 图片缩放
  112. changeScale(num) {
  113. num = num || 1;
  114. this.$refs.cropper.changeScale(num);
  115. },
  116. // 上传预处理
  117. beforeUpload(file) {
  118. if (file.type.indexOf("image/") == -1) {
  119. this.msgError("文件格式错误,请上传图片类型,如:JPG,PNG后缀的文件。");
  120. } else {
  121. const reader = new FileReader();
  122. reader.readAsDataURL(file);
  123. reader.onload = () => {
  124. this.options.img = reader.result;
  125. };
  126. }
  127. },
  128. // 上传图片
  129. uploadImg() {
  130. this.$refs.cropper.getCropBlob(data => {
  131. let formData = new FormData();
  132. formData.append("avatarfile", data);
  133. uploadAvatar(formData).then(response => {
  134. this.open = false;
  135. this.options.img = process.env.VUE_APP_BASE_API + response.imgUrl;
  136. store.commit('SET_AVATAR', this.options.img);
  137. this.msgSuccess("修改成功");
  138. this.visible = false;
  139. });
  140. });
  141. },
  142. // 实时预览
  143. realTime(data) {
  144. this.previews = data;
  145. }
  146. }
  147. };
  148. </script>
  149. <style scoped lang="scss">
  150. .user-info-head {
  151. position: relative;
  152. display: inline-block;
  153. height: 120px;
  154. }
  155. .user-info-head:hover:after {
  156. content: '+';
  157. position: absolute;
  158. left: 0;
  159. right: 0;
  160. top: 0;
  161. bottom: 0;
  162. color: #eee;
  163. background: rgba(0, 0, 0, 0.5);
  164. font-size: 24px;
  165. font-style: normal;
  166. -webkit-font-smoothing: antialiased;
  167. -moz-osx-font-smoothing: grayscale;
  168. cursor: pointer;
  169. line-height: 110px;
  170. border-radius: 50%;
  171. }
  172. </style>