inleft
2022-02-15 91dc6cdda0548ff7f6e473a81933fa206d912cef
commit | author | age
9bcb19 1 <template>
I 2
3   <a-modal
4     title="修改头像"
5     :visible="visible"
6     :maskClosable="false"
7     :confirmLoading="confirmLoading"
8     :width="800"
9     :footer="null"
10     @cancel="cancelHandel">
11     <a-row>
12       <a-col :xs="24" :md="12" :style="{height: '350px'}">
13         <vue-cropper
14           ref="cropper"
15           :img="options.img"
16           :info="true"
17           :autoCrop="options.autoCrop"
18           :autoCropWidth="options.autoCropWidth"
19           :autoCropHeight="options.autoCropHeight"
20           :fixedBox="options.fixedBox"
21           @realTime="realTime"
22         >
23         </vue-cropper>
24       </a-col>
25       <a-col :xs="24" :md="12" :style="{height: '350px'}">
26         <div class="avatar-upload-preview">
27           <img :src="previews.url" :style="previews.img"/>
28         </div>
29       </a-col>
30     </a-row>
31     <br>
32     <a-row>
33       <a-col :lg="2" :md="2">
34         <a-upload name="file" :beforeUpload="beforeUpload" :showUploadList="false">
35           <a-button icon="upload">选择图片</a-button>
36         </a-upload>
37       </a-col>
38       <a-col :lg="{span: 1, offset: 2}" :md="2">
39         <a-button icon="plus" @click="changeScale(1)"/>
40       </a-col>
41       <a-col :lg="{span: 1, offset: 1}" :md="2">
42         <a-button icon="minus" @click="changeScale(-1)"/>
43       </a-col>
44       <a-col :lg="{span: 1, offset: 1}" :md="2">
45         <a-button icon="undo" @click="rotateLeft"/>
46       </a-col>
47       <a-col :lg="{span: 1, offset: 1}" :md="2">
48         <a-button icon="redo" @click="rotateRight"/>
49       </a-col>
50       <a-col :lg="{span: 2, offset: 6}" :md="2">
51         <a-button type="primary" @click="finish('blob')" :loading="uploading">保存</a-button>
52       </a-col>
53     </a-row>
54   </a-modal>
55
56 </template>
57 <script>
58   import { sysFileInfoUpload } from '@/api/modular/system/fileManage'
59   import { sysUserUpdateAvatar } from '@/api/modular/system/userManage'
60
61   export default {
62   data () {
63     return {
64       visible: false,
65       id: null,
66       confirmLoading: false,
67       fileList: [],
68       uploading: false,
69       options: {
70         img: '',
71         autoCrop: true,
72         autoCropWidth: 200,
73         autoCropHeight: 200,
74         fixedBox: true
75       },
76       previews: {}
77     }
78   },
79   methods: {
80     edit (id) {
81       this.visible = true
82       this.id = id
83       /* 获取原始头像 */
84     },
85     close () {
86       this.id = null
87       this.visible = false
88     },
89     cancelHandel () {
90       this.close()
91     },
92     changeScale (num) {
93       num = num || 1
94       this.$refs.cropper.changeScale(num)
95     },
96     rotateLeft () {
97       this.$refs.cropper.rotateLeft()
98     },
99     rotateRight () {
100       this.$refs.cropper.rotateRight()
101     },
102     beforeUpload (file) {
103       this.fileList = file
104       const reader = new FileReader()
105       // 把Array Buffer转化为blob 如果是base64不需要
106       // 转化为base64
107       reader.readAsDataURL(file)
108       reader.onload = () => {
109         this.options.img = reader.result
110       }
111       // 转化为blob
112       // reader.readAsArrayBuffer(file)
113       return false
114     },
115
116     // 上传图片(点击上传按钮)
117     finish (type) {
118       if (type === 'blob') {
119         this.uploading = true
120         this.$refs.cropper.getCropBlob((data) => {
121           const files = new window.File(
122             [data],
123             this.fileList.name,
124             { type: this.fileList.type }
125           )
126           const formData = new FormData()
127           formData.append('file', files)
128           sysFileInfoUpload(formData).then((res) => {
129             if (res.success) {
130               this.updateAvatar(res.data)
131               this.$emit('ok', res.data)
132             } else {
133               this.uploading = false
134               this.$message.error(res.message)
135             }
136           })
137         })
138       } else {
139         this.$refs.cropper.getCropData((data) => {
140           console.log(data)
141         })
142       }
143     },
144     updateAvatar (data) {
145       const params = {
146         id: this.id,
147         avatar: data
148       }
149       sysUserUpdateAvatar(params).then((res) => {
150         this.uploading = false
151         if (res.success) {
152           this.visible = false
153           this.$message.success('头像上传修改成功')
154         } else {
155           this.$message.error(res.message)
156         }
157       })
158     },
159     realTime (data) {
160       this.previews = data
161     }
162   }
163 }
164 </script>
165
166 <style lang="less" scoped>
167
168   .avatar-upload-preview {
169     position: absolute;
170     top: 50%;
171     transform: translate(50%, -50%);
172     width: 200px;
173     height: 200px;
174     border-radius: 50%;
175     box-shadow: 0 0 4px #ccc;
176     overflow: hidden;
177
178     img {
179       width: 100%;
180       height: 100%;
181     }
182   }
183 </style>