<template>
|
|
<a-modal
|
title="修改头像"
|
:visible="visible"
|
:maskClosable="false"
|
:confirmLoading="confirmLoading"
|
:width="800"
|
:footer="null"
|
@cancel="cancelHandel">
|
<a-row>
|
<a-col :xs="24" :md="12" :style="{height: '350px'}">
|
<vue-cropper
|
ref="cropper"
|
:img="options.img"
|
:info="true"
|
:autoCrop="options.autoCrop"
|
:autoCropWidth="options.autoCropWidth"
|
:autoCropHeight="options.autoCropHeight"
|
:fixedBox="options.fixedBox"
|
@realTime="realTime"
|
>
|
</vue-cropper>
|
</a-col>
|
<a-col :xs="24" :md="12" :style="{height: '350px'}">
|
<div class="avatar-upload-preview">
|
<img :src="previews.url" :style="previews.img"/>
|
</div>
|
</a-col>
|
</a-row>
|
<br>
|
<a-row>
|
<a-col :lg="2" :md="2">
|
<a-upload name="file" :beforeUpload="beforeUpload" :showUploadList="false">
|
<a-button icon="upload">选择图片</a-button>
|
</a-upload>
|
</a-col>
|
<a-col :lg="{span: 1, offset: 2}" :md="2">
|
<a-button icon="plus" @click="changeScale(1)"/>
|
</a-col>
|
<a-col :lg="{span: 1, offset: 1}" :md="2">
|
<a-button icon="minus" @click="changeScale(-1)"/>
|
</a-col>
|
<a-col :lg="{span: 1, offset: 1}" :md="2">
|
<a-button icon="undo" @click="rotateLeft"/>
|
</a-col>
|
<a-col :lg="{span: 1, offset: 1}" :md="2">
|
<a-button icon="redo" @click="rotateRight"/>
|
</a-col>
|
<a-col :lg="{span: 2, offset: 6}" :md="2">
|
<a-button type="primary" @click="finish('blob')" :loading="uploading">保存</a-button>
|
</a-col>
|
</a-row>
|
</a-modal>
|
|
</template>
|
<script>
|
import { sysFileInfoUpload } from '@/api/modular/system/fileManage'
|
import { sysUserUpdateAvatar } from '@/api/modular/system/userManage'
|
|
export default {
|
data () {
|
return {
|
visible: false,
|
id: null,
|
confirmLoading: false,
|
fileList: [],
|
uploading: false,
|
options: {
|
img: '',
|
autoCrop: true,
|
autoCropWidth: 200,
|
autoCropHeight: 200,
|
fixedBox: true
|
},
|
previews: {}
|
}
|
},
|
methods: {
|
edit (id) {
|
this.visible = true
|
this.id = id
|
/* 获取原始头像 */
|
},
|
close () {
|
this.id = null
|
this.visible = false
|
},
|
cancelHandel () {
|
this.close()
|
},
|
changeScale (num) {
|
num = num || 1
|
this.$refs.cropper.changeScale(num)
|
},
|
rotateLeft () {
|
this.$refs.cropper.rotateLeft()
|
},
|
rotateRight () {
|
this.$refs.cropper.rotateRight()
|
},
|
beforeUpload (file) {
|
this.fileList = file
|
const reader = new FileReader()
|
// 把Array Buffer转化为blob 如果是base64不需要
|
// 转化为base64
|
reader.readAsDataURL(file)
|
reader.onload = () => {
|
this.options.img = reader.result
|
}
|
// 转化为blob
|
// reader.readAsArrayBuffer(file)
|
return false
|
},
|
|
// 上传图片（点击上传按钮）
|
finish (type) {
|
if (type === 'blob') {
|
this.uploading = true
|
this.$refs.cropper.getCropBlob((data) => {
|
const files = new window.File(
|
[data],
|
this.fileList.name,
|
{ type: this.fileList.type }
|
)
|
const formData = new FormData()
|
formData.append('file', files)
|
sysFileInfoUpload(formData).then((res) => {
|
if (res.success) {
|
this.updateAvatar(res.data)
|
this.$emit('ok', res.data)
|
} else {
|
this.uploading = false
|
this.$message.error(res.message)
|
}
|
})
|
})
|
} else {
|
this.$refs.cropper.getCropData((data) => {
|
console.log(data)
|
})
|
}
|
},
|
updateAvatar (data) {
|
const params = {
|
id: this.id,
|
avatar: data
|
}
|
sysUserUpdateAvatar(params).then((res) => {
|
this.uploading = false
|
if (res.success) {
|
this.visible = false
|
this.$message.success('头像上传修改成功')
|
} else {
|
this.$message.error(res.message)
|
}
|
})
|
},
|
realTime (data) {
|
this.previews = data
|
}
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
|
.avatar-upload-preview {
|
position: absolute;
|
top: 50%;
|
transform: translate(50%, -50%);
|
width: 200px;
|
height: 200px;
|
border-radius: 50%;
|
box-shadow: 0 0 4px #ccc;
|
overflow: hidden;
|
|
img {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
</style>
|
