526互联

webman:前后端分离上传图片(v1.5.7)

发布时间 2023-09-30 16:17:58作者: 刘宏缔的架构森林

一，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
说明：作者:刘宏缔 邮箱: 371125307@qq.com

四，查看webman的版本:

liuhongdi@lhdpc:/data/webman/imageadmin$ php webman version
Webman-framework v1.5.7