From af0e0a110e7187bf008655f7510199a0c0b25ec4 Mon Sep 17 00:00:00 2001
From: Nymph2333 <498092988@qq.com>
Date: 星期一, 10 四月 2023 14:27:40 +0800
Subject: [PATCH] newInstance() 已弃用,使用clazz.getDeclaredConstructor().newInstance() This method propagates any exception thrown by the nullary constructor, including a checked exception. Use of this method effectively bypasses the compile-time exception checking that would otherwise be performed by the compiler. The Constructor.newInstance method avoids this problem by wrapping any exception thrown by the constructor in a (checked) InvocationTargetException. The call clazz.newInstance() can be replaced by clazz.getDeclaredConstructor().newInstance() The latter sequence of calls is inferred to be able to throw the additional exception types InvocationTargetException and NoSuchMethodException. Both of these exception types are subclasses of ReflectiveOperationException.
---
ruoyi-ui/src/views/system/user/profile/userAvatar.vue | 325 +++++++++++++++++++++++++++++++-----------------------
1 files changed, 187 insertions(+), 138 deletions(-)
diff --git a/ruoyi-ui/src/views/system/user/profile/userAvatar.vue b/ruoyi-ui/src/views/system/user/profile/userAvatar.vue
index 5446ab5..70d8487 100644
--- a/ruoyi-ui/src/views/system/user/profile/userAvatar.vue
+++ b/ruoyi-ui/src/views/system/user/profile/userAvatar.vue
@@ -1,138 +1,187 @@
-<template>
- <div>
- <img v-bind:src="options.img" @click="editCropper()" title="点击上传头像" class="img-circle img-lg" />
- <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
- <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"
- @realTime="realTime"
- />
- </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" :md="2">
- <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}" :md="2">
- <el-button icon="el-icon-plus" size="small" @click="changeScale(1)"></el-button>
- </el-col>
- <el-col :lg="{span: 1, offset: 1}" :md="2">
- <el-button icon="el-icon-minus" size="small" @click="changeScale(-1)"></el-button>
- </el-col>
- <el-col :lg="{span: 1, offset: 1}" :md="2">
- <el-button icon="el-icon-refresh-left" size="small" @click="rotateLeft()"></el-button>
- </el-col>
- <el-col :lg="{span: 1, offset: 1}" :md="2">
- <el-button icon="el-icon-refresh-right" size="small" @click="rotateRight()"></el-button>
- </el-col>
- <el-col :lg="{span: 2, offset: 6}" :md="2">
- <el-button type="primary" size="small" @click="uploadImg()">提 交</el-button>
- </el-col>
- </el-row>
- </el-dialog>
- </div>
-</template>
-
-<script>
-import store from "@/store";
-import { VueCropper } from "vue-cropper";
-import { uploadAvatar } from "@/api/system/user";
-
-export default {
- components: { VueCropper },
- props: {
- user: {
- type: Object
- }
- },
- data() {
- return {
- // 是否显示弹出层
- open: false,
- // 弹出层标题
- title: "修改头像",
- options: {
- img: store.getters.avatar, //裁剪图片的地址
- autoCrop: true, // 是否默认生成截图框
- autoCropWidth: 200, // 默认生成截图框宽度
- autoCropHeight: 200, // 默认生成截图框高度
- fixedBox: true // 固定截图框大小 不允许改变
- },
- previews: {}
- };
- },
- methods: {
- // 编辑头像
- editCropper() {
- this.open = true;
- },
- // 覆盖默认的上传行为
- 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.msgError("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。");
- } else {
- const reader = new FileReader();
- reader.readAsDataURL(file);
- reader.onload = () => {
- this.options.img = reader.result;
- };
- }
- },
- // 上传图片
- uploadImg() {
- this.$refs.cropper.getCropBlob(data => {
- let formData = new FormData();
- formData.append("avatarfile", data);
- uploadAvatar(formData).then(response => {
- if (response.code === 200) {
- this.open = false;
- this.options.img = process.env.VUE_APP_BASE_API + response.imgUrl;
- this.msgSuccess("修改成功");
- } else {
- this.msgError(response.msg);
- }
- this.$refs.cropper.clearCrop();
- });
- });
- },
- // 实时预览
- realTime(data) {
- this.previews = data;
- }
- }
-};
-</script>
\ No newline at end of file
+<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>
+</template>
+
+<script>
+import store from "@/store";
+import { VueCropper } from "vue-cropper";
+import { uploadAvatar } from "@/api/system/user";
+import { debounce } from '@/utils'
+
+export default {
+ components: { VueCropper },
+ props: {
+ user: {
+ type: Object
+ }
+ },
+ data() {
+ return {
+ // 是否显示弹出层
+ open: false,
+ // 是否显示cropper
+ visible: false,
+ // 弹出层标题
+ title: "修改头像",
+ options: {
+ img: store.getters.avatar, //裁剪图片的地址
+ autoCrop: true, // 是否默认生成截图框
+ autoCropWidth: 200, // 默认生成截图框宽度
+ autoCropHeight: 200, // 默认生成截图框高度
+ fixedBox: true, // 固定截图框大小 不允许改变
+ outputType:"png" // 默认生成截图为PNG格式
+ },
+ previews: {},
+ resizeHandler: null
+ };
+ },
+ methods: {
+ // 编辑头像
+ editCropper() {
+ this.open = true;
+ },
+ // 打开弹出层结束时的回调
+ modalOpened() {
+ this.visible = true;
+ if (!this.resizeHandler) {
+ this.resizeHandler = debounce(() => {
+ this.refresh()
+ }, 100)
+ }
+ 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;
+ };
+ }
+ },
+ // 上传图片
+ uploadImg() {
+ this.$refs.cropper.getCropBlob(data => {
+ let formData = new FormData();
+ formData.append("avatarfile", data);
+ 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;
+ });
+ });
+ },
+ // 实时预览
+ realTime(data) {
+ this.previews = data;
+ },
+ // 关闭窗口
+ 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;
+ display: inline-block;
+ height: 120px;
+}
+
+.user-info-head:hover:after {
+ content: '+';
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ color: #eee;
+ background: rgba(0, 0, 0, 0.5);
+ font-size: 24px;
+ font-style: normal;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ cursor: pointer;
+ line-height: 110px;
+ border-radius: 50%;
+}
+</style>
--
Gitblit v1.9.2