mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git
synced 2025-12-18 08:55:52 +08:00
IM
This commit is contained in:
程
246
im/src/components/layout/AvatarCropper.vue
Normal file
246
im/src/components/layout/AvatarCropper.vue
Normal file
@@ -0,0 +1,246 @@
|
||||
<template>
|
||||
<div class="lum-dialog-mask">
|
||||
<el-container class="lum-dialog-box">
|
||||
<el-header class="header" height="50px">
|
||||
<p>选择头像</p>
|
||||
<p class="tools">
|
||||
<i class="el-icon-close" @click="$emit('close', 0)" />
|
||||
</p>
|
||||
</el-header>
|
||||
<el-main class="main">
|
||||
<el-container class="full-height">
|
||||
<el-aside width="400px">
|
||||
<div class="cropper-box">
|
||||
<vue-cropper
|
||||
ref="cropper"
|
||||
mode="cover"
|
||||
:img="option.img"
|
||||
:output-size="option.size"
|
||||
:output-type="option.outputType"
|
||||
:info="true"
|
||||
:full="option.full"
|
||||
:fixed="fixed"
|
||||
:fixed-number="fixedNumber"
|
||||
:can-move="option.canMove"
|
||||
:can-move-box="option.canMoveBox"
|
||||
:fixed-box="option.fixedBox"
|
||||
:original="option.original"
|
||||
:auto-crop="option.autoCrop"
|
||||
:auto-crop-width="option.autoCropWidth"
|
||||
:auto-crop-height="option.autoCropHeight"
|
||||
:center-box="option.centerBox"
|
||||
:high="option.high"
|
||||
@real-time="realTime"
|
||||
/>
|
||||
<input
|
||||
type="file"
|
||||
id="uploads"
|
||||
ref="fileInput"
|
||||
accept="image/png, image/jpeg, image/jpg"
|
||||
style="display: none"
|
||||
@change="uploadImg($event, 1)"
|
||||
/>
|
||||
</div>
|
||||
<div class="tools tools-flex">
|
||||
<el-button
|
||||
size="small"
|
||||
plain
|
||||
icon="el-icon-upload"
|
||||
@click="clickUpload"
|
||||
>上传图片
|
||||
</el-button>
|
||||
<el-button
|
||||
size="small"
|
||||
plain
|
||||
icon="el-icon-refresh"
|
||||
@click="refreshCrop"
|
||||
>刷新
|
||||
</el-button>
|
||||
<el-button
|
||||
size="small"
|
||||
plain
|
||||
icon="el-icon-refresh-left"
|
||||
@click="rotateLeft"
|
||||
>左转
|
||||
</el-button>
|
||||
<el-button
|
||||
size="small"
|
||||
plain
|
||||
icon="el-icon-refresh-right"
|
||||
@click="rotateRight"
|
||||
>右转
|
||||
</el-button>
|
||||
</div>
|
||||
</el-aside>
|
||||
<el-main class="no-padding">
|
||||
<div class="cropper-box">
|
||||
<div class="preview-img">
|
||||
<img v-if="cusPreviewsImg" :src="cusPreviewsImg" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="tools">
|
||||
<el-button type="primary" size="small" @click="uploadService">
|
||||
保存图片
|
||||
</el-button>
|
||||
</div>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { VueCropper } from 'vue-cropper'
|
||||
import { ServeUploadFileStream } from '@/api/upload'
|
||||
|
||||
export default {
|
||||
name: 'AvatarCropper',
|
||||
components: {
|
||||
VueCropper,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
cusPreviewsImg: '',
|
||||
previews: {},
|
||||
option: {
|
||||
img: '',
|
||||
size: 1,
|
||||
full: false,
|
||||
outputType: 'png',
|
||||
canMove: true,
|
||||
fixedBox: true,
|
||||
original: false,
|
||||
canMoveBox: true,
|
||||
autoCrop: true,
|
||||
// 只有自动截图开启 宽度高度才生效
|
||||
autoCropWidth: 200,
|
||||
autoCropHeight: 150,
|
||||
centerBox: false,
|
||||
high: true,
|
||||
},
|
||||
fixed: true,
|
||||
fixedNumber: [1, 1],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clickUpload() {
|
||||
this.$refs.fileInput.click()
|
||||
},
|
||||
clearCrop() {
|
||||
if (!this.cusPreviewsImg) return false
|
||||
this.$refs.cropper.clearCrop()
|
||||
},
|
||||
refreshCrop() {
|
||||
if (!this.cusPreviewsImg) return false
|
||||
this.$refs.cropper.refresh()
|
||||
},
|
||||
rotateLeft() {
|
||||
if (!this.cusPreviewsImg) return false
|
||||
this.$refs.cropper.rotateLeft()
|
||||
},
|
||||
rotateRight() {
|
||||
if (!this.cusPreviewsImg) return false
|
||||
this.$refs.cropper.rotateRight()
|
||||
},
|
||||
// 实时预览函数
|
||||
realTime() {
|
||||
this.$refs.cropper.getCropData(img => {
|
||||
this.cusPreviewsImg = img
|
||||
})
|
||||
},
|
||||
|
||||
// 上传回调事件
|
||||
uploadImg(e, num) {
|
||||
let file = e.target.files[0]
|
||||
if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
|
||||
this.$message('图片类型必须是.gif,jpeg,jpg,png,bmp中的一种')
|
||||
return false
|
||||
}
|
||||
|
||||
let reader = new FileReader()
|
||||
reader.onload = e => {
|
||||
let data
|
||||
if (typeof e.target.result === 'object') {
|
||||
// 把Array Buffer转化为blob 如果是base64不需要
|
||||
data = window.URL.createObjectURL(new Blob([e.target.result]))
|
||||
} else {
|
||||
data = e.target.result
|
||||
}
|
||||
if (num === 1) {
|
||||
this.option.img = data
|
||||
} else if (num === 2) {
|
||||
this.example2.img = data
|
||||
}
|
||||
}
|
||||
// 转化为base64
|
||||
// reader.readAsDataURL(file)
|
||||
// 转化为blob
|
||||
reader.readAsArrayBuffer(file)
|
||||
},
|
||||
|
||||
// 上传图片到服务器
|
||||
uploadService() {
|
||||
if (this.cusPreviewsImg == '') return
|
||||
ServeUploadFileStream({
|
||||
fileStream: this.cusPreviewsImg,
|
||||
})
|
||||
.then(res => {
|
||||
if (res.code == 200) {
|
||||
this.$emit('close', 1, res.data.avatar)
|
||||
} else {
|
||||
this.$message('文件上传失败,请稍后再试...')
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message('文件上传失败,请稍后再试...')
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.lum-dialog-box {
|
||||
height: 550px;
|
||||
max-width: 800px;
|
||||
|
||||
.main {
|
||||
.cropper-box {
|
||||
height: 400px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.preview-img {
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 0 4px #ccc;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tools {
|
||||
height: 40px;
|
||||
margin-top: 20px;
|
||||
text-align: center;
|
||||
|
||||
button {
|
||||
border-radius: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.tools-flex {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user