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