|
@@ -28,6 +28,20 @@
|
|
|
></el-option>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
+ <el-form-item :label="$t('签名')">
|
|
|
+ <el-upload
|
|
|
+ v-if="imageUrl"
|
|
|
+ class="avatar-uploader"
|
|
|
+ :action="signPic.url"
|
|
|
+ :headers="signPic.headers"
|
|
|
+ :show-file-list="false"
|
|
|
+ :on-success="handleAvatarSuccess"
|
|
|
+ :before-upload="beforeAvatarUpload"
|
|
|
+ >
|
|
|
+ <img v-if="user.imageUrl" :src="user.imageUrl" class="avatar">
|
|
|
+ <i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
|
|
+ </el-upload>
|
|
|
+ </el-form-item>
|
|
|
<el-form-item>
|
|
|
<el-button type="primary" size="mini" @click="submit">保存</el-button>
|
|
|
<el-button type="danger" size="mini" @click="close">关闭</el-button>
|
|
@@ -37,6 +51,7 @@
|
|
|
|
|
|
<script>
|
|
|
import { updateUserProfile } from "@/api/system/user";
|
|
|
+import {getToken} from "@/utils/auth";
|
|
|
|
|
|
export default {
|
|
|
props: {
|
|
@@ -47,6 +62,14 @@ export default {
|
|
|
data() {
|
|
|
return {
|
|
|
homeTypeOptions: [],
|
|
|
+ signPic: {
|
|
|
+ fileList: [],
|
|
|
+ // 设置上传的请求头部
|
|
|
+ headers: { Authorization: "Bearer " + getToken() },
|
|
|
+ // 上传的地址
|
|
|
+ url: process.env.VUE_APP_BASE_API + "/system/user/uploadFile",
|
|
|
+ },
|
|
|
+ imageUrl: true,
|
|
|
// 表单校验
|
|
|
rules: {
|
|
|
nickName: [
|
|
@@ -89,7 +112,53 @@ export default {
|
|
|
close() {
|
|
|
this.$store.dispatch("tagsView/delView", this.$route);
|
|
|
this.$router.push({ path: "/index" });
|
|
|
- }
|
|
|
+ },
|
|
|
+ handleAvatarSuccess(res, file) {
|
|
|
+ this.$set(this.user, 'imageUrl', URL.createObjectURL(file.raw))
|
|
|
+ this.imageUrl = false
|
|
|
+ this.user.signUrl = res.msg
|
|
|
+ this.imageUrl = true
|
|
|
+ },
|
|
|
+ beforeAvatarUpload(file) {
|
|
|
+ const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
|
|
|
+ const isLt2M = file.size / 1024 / 1024 < 2;
|
|
|
+ if (!isJPG) {
|
|
|
+ this.$message.error('上传图片只能是 JPG、png 格式!');
|
|
|
+ }
|
|
|
+ if (!isLt2M) {
|
|
|
+ this.$message.error('上传图片大小不能超过 2MB!');
|
|
|
+ }
|
|
|
+ return isJPG && isLt2M;
|
|
|
+ },
|
|
|
+ handlePictureCardPreview(file) {
|
|
|
+ this.dialogImageUrl = file.url;
|
|
|
+ this.dialogVisible = true;
|
|
|
+ },
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
+<style>
|
|
|
+.avatar-uploader .el-upload {
|
|
|
+ border: 1px dashed #d9d9d9;
|
|
|
+ border-radius: 6px;
|
|
|
+ cursor: pointer;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+.avatar-uploader .el-upload:hover {
|
|
|
+ border-color: #409EFF;
|
|
|
+}
|
|
|
+.avatar-uploader-icon {
|
|
|
+ font-size: 28px;
|
|
|
+ color: #8c939d;
|
|
|
+ width: 178px;
|
|
|
+ height: 178px;
|
|
|
+ line-height: 178px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+.avatar {
|
|
|
+ width: 178px;
|
|
|
+ height: 178px;
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+</style>
|