|
|
|
|
@ -1,162 +1,133 @@ |
|
|
|
|
<template> |
|
|
|
|
<div> |
|
|
|
|
<div class="user-info-head" @click="editCropper()"><img v-bind:src="options.img" title="点击上传头像" class="img-circle img-lg" /></div> |
|
|
|
|
<el-dialog :title="title" :visible.sync="open" width="800px" append-to-body @opened="modalOpened" @close="closeDialog"> |
|
|
|
|
<el-row> |
|
|
|
|
<el-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" |
|
|
|
|
:outputType="options.outputType" |
|
|
|
|
@realTime="realTime" |
|
|
|
|
v-if="visible" |
|
|
|
|
/> |
|
|
|
|
</el-col> |
|
|
|
|
<el-col :xs="24" :md="12" :style="{height: '350px'}"> |
|
|
|
|
<div class="avatar-upload-preview"> |
|
|
|
|
<img :src="previews.url" :style="previews.img" /> |
|
|
|
|
</div> |
|
|
|
|
</el-col> |
|
|
|
|
</el-row> |
|
|
|
|
<br /> |
|
|
|
|
<el-row> |
|
|
|
|
<el-col :lg="2" :sm="3" :xs="3"> |
|
|
|
|
<el-upload action="#" :http-request="requestUpload" :show-file-list="false" :before-upload="beforeUpload"> |
|
|
|
|
<el-button size="small"> |
|
|
|
|
选择 |
|
|
|
|
<i class="el-icon-upload el-icon--right"></i> |
|
|
|
|
</el-button> |
|
|
|
|
</el-upload> |
|
|
|
|
</el-col> |
|
|
|
|
<el-col :lg="{span: 1, offset: 2}" :sm="2" :xs="2"> |
|
|
|
|
<el-button icon="el-icon-plus" size="small" @click="changeScale(1)"></el-button> |
|
|
|
|
</el-col> |
|
|
|
|
<el-col :lg="{span: 1, offset: 1}" :sm="2" :xs="2"> |
|
|
|
|
<el-button icon="el-icon-minus" size="small" @click="changeScale(-1)"></el-button> |
|
|
|
|
</el-col> |
|
|
|
|
<el-col :lg="{span: 1, offset: 1}" :sm="2" :xs="2"> |
|
|
|
|
<el-button icon="el-icon-refresh-left" size="small" @click="rotateLeft()"></el-button> |
|
|
|
|
</el-col> |
|
|
|
|
<el-col :lg="{span: 1, offset: 1}" :sm="2" :xs="2"> |
|
|
|
|
<el-button icon="el-icon-refresh-right" size="small" @click="rotateRight()"></el-button> |
|
|
|
|
</el-col> |
|
|
|
|
<el-col :lg="{span: 2, offset: 6}" :sm="2" :xs="2"> |
|
|
|
|
<el-button type="primary" size="small" @click="uploadImg()">提 交</el-button> |
|
|
|
|
</el-col> |
|
|
|
|
</el-row> |
|
|
|
|
</el-dialog> |
|
|
|
|
<div class="user-info-head" @click="editCropper()"> |
|
|
|
|
<img |
|
|
|
|
v-bind:src="optionsImg" |
|
|
|
|
title="点击上传头像" |
|
|
|
|
class="img-circle img-lg" |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
<!-- 文件选择隐藏输入 --> |
|
|
|
|
<input |
|
|
|
|
ref="fileInput" |
|
|
|
|
type="file" |
|
|
|
|
accept="image/*" |
|
|
|
|
style="display: none" |
|
|
|
|
@change="handleFileSelect" |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
import store from "@/store" |
|
|
|
|
import { VueCropper } from "vue-cropper" |
|
|
|
|
import { uploadAvatar } from "@/api/system/user" |
|
|
|
|
import { debounce } from '@/utils' |
|
|
|
|
|
|
|
|
|
import store from "@/store"; |
|
|
|
|
import { postUserOpsAvatarUpdate } from "@/api/system/user"; |
|
|
|
|
import { uploadFile } from "@/utils/requestMinio"; |
|
|
|
|
export default { |
|
|
|
|
components: { VueCropper }, |
|
|
|
|
data() { |
|
|
|
|
return { |
|
|
|
|
// 是否显示弹出层 |
|
|
|
|
open: false, |
|
|
|
|
// 是否显示cropper |
|
|
|
|
visible: false, |
|
|
|
|
// 弹出层标题 |
|
|
|
|
title: "修改头像", |
|
|
|
|
options: { |
|
|
|
|
img: store.getters.avatar, //裁剪图片的地址 |
|
|
|
|
autoCrop: true, // 是否默认生成截图框 |
|
|
|
|
autoCropWidth: 200, // 默认生成截图框宽度 |
|
|
|
|
autoCropHeight: 200, // 默认生成截图框高度 |
|
|
|
|
fixedBox: true, // 固定截图框大小 不允许改变 |
|
|
|
|
outputType:"png", // 默认生成截图为PNG格式 |
|
|
|
|
filename: 'avatar' // 文件名称 |
|
|
|
|
}, |
|
|
|
|
previews: {}, |
|
|
|
|
resizeHandler: null |
|
|
|
|
} |
|
|
|
|
optionsImg: |
|
|
|
|
store.getters.config.MINIO_ENDPOINT_HTTPS + |
|
|
|
|
store.getters.userInfo.avatar, |
|
|
|
|
// 最大文件大小：500KB |
|
|
|
|
MAX_FILE_SIZE: 500 * 1024, |
|
|
|
|
}; |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
// 编辑头像 |
|
|
|
|
// 点击头像触发文件选择 |
|
|
|
|
editCropper() { |
|
|
|
|
this.open = true |
|
|
|
|
this.$refs.fileInput.click(); |
|
|
|
|
}, |
|
|
|
|
// 打开弹出层结束时的回调 |
|
|
|
|
modalOpened() { |
|
|
|
|
this.visible = true |
|
|
|
|
if (!this.resizeHandler) { |
|
|
|
|
this.resizeHandler = debounce(() => { |
|
|
|
|
this.refresh() |
|
|
|
|
}, 100) |
|
|
|
|
// 文件选择处理 |
|
|
|
|
async handleFileSelect(event) { |
|
|
|
|
const file = event.target.files[0]; |
|
|
|
|
if (!file) return; |
|
|
|
|
|
|
|
|
|
// 1. 验证文件类型（只能上传图片） |
|
|
|
|
if (!file.type.startsWith("image/")) { |
|
|
|
|
this.$modal.msgError("只能上传图片文件"); |
|
|
|
|
event.target.value = ""; |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// 2文件大小验证（最大500KB） |
|
|
|
|
if (file.size > this.MAX_FILE_SIZE) { |
|
|
|
|
this.$modal.msgError( |
|
|
|
|
`文件大小不能超过 500KB（当前：${this.formatFileSize(file.size)}）` |
|
|
|
|
); |
|
|
|
|
event.target.value = ""; |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
try { |
|
|
|
|
await this.uploadAvatar(file); |
|
|
|
|
} catch (error) { |
|
|
|
|
console.error("头像上传失败:", error); |
|
|
|
|
this.$modal.msgError("上传失败: " + error.message); |
|
|
|
|
} finally { |
|
|
|
|
// 清空文件输入 |
|
|
|
|
event.target.value = ""; |
|
|
|
|
} |
|
|
|
|
window.addEventListener("resize", this.resizeHandler) |
|
|
|
|
}, |
|
|
|
|
// 刷新组件 |
|
|
|
|
refresh() { |
|
|
|
|
this.$refs.cropper.refresh() |
|
|
|
|
}, |
|
|
|
|
// 覆盖默认的上传行为 |
|
|
|
|
requestUpload() { |
|
|
|
|
}, |
|
|
|
|
// 向左旋转 |
|
|
|
|
rotateLeft() { |
|
|
|
|
this.$refs.cropper.rotateLeft() |
|
|
|
|
}, |
|
|
|
|
// 向右旋转 |
|
|
|
|
rotateRight() { |
|
|
|
|
this.$refs.cropper.rotateRight() |
|
|
|
|
}, |
|
|
|
|
// 图片缩放 |
|
|
|
|
changeScale(num) { |
|
|
|
|
num = num || 1 |
|
|
|
|
this.$refs.cropper.changeScale(num) |
|
|
|
|
}, |
|
|
|
|
// 上传预处理 |
|
|
|
|
beforeUpload(file) { |
|
|
|
|
if (file.type.indexOf("image/") == -1) { |
|
|
|
|
this.$modal.msgError("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。") |
|
|
|
|
} else { |
|
|
|
|
const reader = new FileReader() |
|
|
|
|
reader.readAsDataURL(file) |
|
|
|
|
reader.onload = () => { |
|
|
|
|
this.options.img = reader.result |
|
|
|
|
this.options.filename = file.name |
|
|
|
|
} |
|
|
|
|
// 上传头像到 MinIO |
|
|
|
|
async uploadAvatar(file) { |
|
|
|
|
try { |
|
|
|
|
// 确保 MinIO 配置已加载 |
|
|
|
|
await this.ensureMinioInitialized(); |
|
|
|
|
|
|
|
|
|
const config = this.$store.getters.config; |
|
|
|
|
const bucket = config.MINIO_BUCKET_AVATAR || "remote-avatar-test"; |
|
|
|
|
const timestamp = Date.now(); |
|
|
|
|
const ext = file.name.split(".").pop() || "png"; |
|
|
|
|
const fileName = `${timestamp}.${ext}`; |
|
|
|
|
const objectName = `head_portrait/${fileName}`; |
|
|
|
|
|
|
|
|
|
console.log( |
|
|
|
|
`Uploading avatar to bucket: ${bucket}, object: ${objectName}` |
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
// 使用 MinIO 上传 |
|
|
|
|
const result = await uploadFile( |
|
|
|
|
bucket, |
|
|
|
|
objectName, |
|
|
|
|
file, |
|
|
|
|
{}, |
|
|
|
|
(percent) => {} |
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
console.log("MinIO 上传成功:", result); |
|
|
|
|
let avatar = config.MINIO_BUCKET_AVATAR + "/" + result.objectName; |
|
|
|
|
// 上传成功后调用业务接口更新用户信息 |
|
|
|
|
await postUserOpsAvatarUpdate({ |
|
|
|
|
avatar: avatar, |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
// 更新头像显示 |
|
|
|
|
const avatarUrl = config.MINIO_ENDPOINT_HTTPS + avatar; |
|
|
|
|
this.optionsImg = avatarUrl; |
|
|
|
|
store.commit("SET_AVATAR", avatar); |
|
|
|
|
} catch (error) { |
|
|
|
|
throw error; |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
// 上传图片 |
|
|
|
|
uploadImg() { |
|
|
|
|
this.$refs.cropper.getCropBlob(data => { |
|
|
|
|
let formData = new FormData() |
|
|
|
|
formData.append("avatarfile", data, this.options.filename) |
|
|
|
|
uploadAvatar(formData).then(response => { |
|
|
|
|
this.open = false |
|
|
|
|
this.options.img = process.env.VUE_APP_BASE_API + response.imgUrl |
|
|
|
|
store.commit('SET_AVATAR', this.options.img) |
|
|
|
|
this.$modal.msgSuccess("修改成功") |
|
|
|
|
this.visible = false |
|
|
|
|
}) |
|
|
|
|
}) |
|
|
|
|
// 确保 MinIO 客户端已初始化 |
|
|
|
|
async ensureMinioInitialized() { |
|
|
|
|
const config = this.$store.getters.config; |
|
|
|
|
if (!config || !config.MINIO_ENDPOINT) { |
|
|
|
|
console.log("MinIO config not loaded, fetching..."); |
|
|
|
|
await this.$store.dispatch("GetNetConfig"); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
// 实时预览 |
|
|
|
|
realTime(data) { |
|
|
|
|
this.previews = data |
|
|
|
|
// 格式化文件大小 |
|
|
|
|
formatFileSize(bytes) { |
|
|
|
|
if (bytes < 1024) return bytes + " B"; |
|
|
|
|
if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(2) + " KB"; |
|
|
|
|
return (bytes / (1024 * 1024)).toFixed(2) + " MB"; |
|
|
|
|
}, |
|
|
|
|
// 关闭窗口 |
|
|
|
|
closeDialog() { |
|
|
|
|
this.options.img = store.getters.avatar |
|
|
|
|
this.visible = false |
|
|
|
|
window.removeEventListener("resize", this.resizeHandler) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
}; |
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<style scoped lang="scss"> |
|
|
|
|
.user-info-head { |
|
|
|
|
position: relative; |
|
|
|
|
@ -165,7 +136,7 @@ export default { |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.user-info-head:hover:after { |
|
|
|
|
content: '+'; |
|
|
|
|
content: "+"; |
|
|
|
|
position: absolute; |
|
|
|
|
left: 0; |
|
|
|
|
right: 0; |
|
|
|
|
@ -181,4 +152,15 @@ export default { |
|
|
|
|
line-height: 110px; |
|
|
|
|
border-radius: 50%; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.upload-progress-container { |
|
|
|
|
padding: 20px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.upload-progress-info { |
|
|
|
|
margin-bottom: 15px; |
|
|
|
|
text-align: center; |
|
|
|
|
font-size: 14px; |
|
|
|
|
color: #666; |
|
|
|
|
} |
|
|
|
|
</style> |
