一，vue:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 |
<template>
<div class="view_root">
<el-card shadow="never">
<el-form :model="ruleForm" :rules="saveRules" status-icon ref="refForm" label-width="100px" class="demo-ruleForm" style="width:600px;">
<el-form-item label="用户名" >
{{username}}
</el-form-item>
<el-form-item label="修改头像" ref="uploadElement">
<img @click="openimage()" style="width:160px;height:160px;border-radius: 10px;" :src="imgurl" />
<input type="file" ref="hiddenfile" accept="image/*" @change="handleFile" class="hiddenInput"/>
</el-form-item>
<el-form-item label="昵称" prop="nickName" style="margin-bottom: 20px;">
<el-input v-model="ruleForm.nickName" placeholder="请输入昵称" autocomplete="off" ></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm()">提交</el-button>
<el-button @click="resetForm()">重置</el-button>
</el-form-item>
</el-form>
</el-card>
</div>
</template>
<script>
import {get,post} from "@/api/axios";
import {ElMessage} from "element-plus";
import {getUser, setUser} from "@/utils/user";
import VueEvent from "@/event/event";
import {ref,reactive} from "vue";
export default {
name: 'userInfo',
setup() {
//用户名
const username = ref("");
//头像地址
const imgurl = ref("");
//原始的头像地址
const origImgurl = ref("");
//选中的文件
const hiddenfile = ref(null);
//表单元素
const ruleForm = reactive({
nickName:'',
});
//表单
const refForm = ref(null);
//原始的昵称
const origNickname = ref("");
//得到用户信息并显示
const getuserinfo = () => {
get('/api/login/info',{
}).then(res => {
if (res.code == 0) {
username.value = res.data.username;
ruleForm.nickName = res.data.nickname;
origNickname.value = res.data.nickname;
imgurl.value = res.data.head;
origImgurl.value = res.data.head;
} else {
ElMessage.error("用户信息获取失败:"+res.msg);
}
}).catch((error) => {
// error
console.log(error)
})
}
getuserinfo();
//打开选择图片的窗口
const openimage = () => {
hiddenfile.value.click();
}
// 将头像显示为选中的文件
const handleFile = (e) => {
console.log(e)
let file = e.target.files[0];
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () =>{
imgurl.value = reader.result;
console.log(reader)
}
}
//validate的rule
const saveRules = {
nickName: [
{
required: true,
message: "请输入昵称",
trigger: "blur",
},
{ min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
],
};
//提交表单
const submitForm = () => {
//进行validate判断
refForm.value.validate(async (valid) => {
if (valid) {
try {
//得到文件
var file = hiddenfile.value.files[0];
//console.log(file);
var data = new FormData();
// 创建一个表单数据
data.append("file",file);
data.append("nickname",ruleForm.nickName);
post('/api/login/save',data).then(res => {
if (res.code == 0) {
//console.log(res.data);
imgurl.value = res.data.head;
//保存用户信息
let user = getUser();
user.nickname = res.data.nickname;
user.head = res.data.head;
setUser(user);
//通知header更新
VueEvent.emit("refreshUser",'');
//提示
ElMessage.success("用户信息保存成功!");
} else {
ElMessage.error("用户信息保存失败:"+res.msg);
}
}).catch((error) => {
console.log(error)
})
} catch (error) {
console.log(error)
ElMessage.error("用户名或密码不正确");
}
} //end valid
});
}
//重置form
const resetForm = () => {
//恢复原始图片
imgurl.value = origImgurl.value;
//清空文件选择框
hiddenfile.value.value = '';
//清空form的字段
refForm.value.resetFields();
//恢复原始昵称
ruleForm.nickName = origNickname.value;
}
return {
username,
imgurl,
hiddenfile,
ruleForm,
refForm,
saveRules,
openimage,
handleFile,
resetForm,
submitForm,
}
},
}
</script>
<style>
.hiddenInput {
height: 160px;
width:160px;
background: #ff0000;
opacity: 0.5;
display: none;
}
.system_state {
padding: 10px;
}
</style>
|
二，后端php
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 |
<?php
namespace app\controller;
use support\Request;
use result\Result;
use jwt\JwtUtil;
use app\model\Staff as StaffModel;
class LoginController
{
public function index(Request $request)
{
return response(__CLASS__);
}
//得到jwt信息，返回给线下
function getJwtInfo($userId,$nickName) {
//验证成功，生成jwt返回
$jUtil = new JwtUtil();
$token = $jUtil->createJwt($userId);
$res = ["tokenString"=>$token];
$host = "http://192.168.219.6/staffhead";
$res['head'] = $host."/".$userId.".jpg";
$res['nickname'] = $nickName;
return $res;
}
/**
* 保存用户信息
*
* @param \think\Request $request
* @return \think\Response
*/
public function save(Request $request)
{
$staffId = $request->auth;
$nickname = $request->post('nickname','','string');
$staff = new StaffModel();
$upRow = ["nickname"=>$nickname];
$res = $staff-> updateByStaffId($upRow,$staffId);
//处理头像
$fileimg = request()->file('file');
if ($fileimg && $fileimg->isValid()) {
$basedir = '/var/www/html/imgstaffhead';
$destFile = $basedir."/".$staffId.".jpg";
$fileimg->move($destFile);
}
if($res !== false) {
$host = 'http://192.168.219.6/imgstaffhead';
$rand = rand(1000,9999);
$head = $host."/".$staffId.".jpg?rand=".$rand;
$res = ['head'=>$head,
'nickname'=>$nickname];
return Result::Success($res);
}else{
return Result::ErrorCode(400,'数据保存出错');
}
}
/**
* 得到用户信息
*
* @return \think\Response
*/
public function info(Request $request)
{
//得到数据库的用户信息
$staffId = $request->auth;
$staff = new StaffModel();
$rows = $staff->getOneByStaffId($staffId);
if (is_null($rows)) {
return Result::ErrorCode(100,'用户不存在');
}
$host = "http://192.168.219.6/imgstaffhead";
$rand = rand(1000,9999);
$rows['head'] = $host."/".$staffId.".jpg?rand=".$rand;
return Result::Success($rows);
}
}
|
三，测试效果:
说明：刘宏缔的架构森林—专注it技术的博客，
网站：https://blog.imgtouch.com
原文: https://blog.imgtouch.com/index.php/2023/09/25/webman-qian-hou-duan-fen-li-shang-chuan-tu-pian/
代码: https://github.com/liuhongdi/ 或 https://gitee.com/liuhongdi
说明：作者:刘宏缔 邮箱: [email protected]
四，查看webman的版本:
liuhongdi@lhdpc:/data/webman/imageadmin$ php webman version
Webman-framework v1.5.7