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

<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
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);
    }
}