界面

代码

<template>
<div class="user-info-container">
  <div style="width: 30%">
    <h1>用户头像</h1>
    <el-upload action=""
               list-type="picture-card"
               :auto-upload="false"
               :limit="1"
               :file-list="pics"
               :on-change="handleChange"
               :on-success="handleSuccess"
               :on-error="handleError"
               :on-exceed="handleExceed"
               ref="pictureRef"
               :http-request="submitFile">
<!--      显示 +（加号）  -->
      <i slot="default" class="el-icon-plus"></i>
      <div slot="file" slot-scope="{file}">
<!--        显示用户的头像-->
        <img class="el-upload-list__item-thumbnail" :src="(picDialog? '' : global.base)+file.url" alt="">
        <span class="el-upload-list__item-actions">
<!--          删除-->
          <span class="el-upload-list__item-delete" @click="handleRemove(file)">
            <i class="el-icon-delete"></i>
          </span>
        </span>
      </div>
    </el-upload>
  </div>
  <div style="width: 70%">
    <el-form :model="loginUser"  :rules="loginUserRules" ref="editFormRef" label-width="80px">
      <el-form-item label="用户名" prop="userName">
        <el-input v-model="loginUser.userName"></el-input>
      </el-form-item>
      <el-form-item label="电子邮箱" prop="email">
        <el-input v-model="loginUser.email"></el-input>
      </el-form-item>
      <el-form-item label="手机号码" prop="phoneNumber">
        <el-input v-model="loginUser.phoneNumber"></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="sex">
          <el-radio v-model="loginUser.sex" :label="true">男</el-radio>
          <el-radio v-model="loginUser.sex" :label="false">女</el-radio>
      </el-form-item>
      <el-form-item label="生日" prop="birthday">
        <el-date-picker
            v-model="loginUser.birthday"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="选择日期"></el-date-picker>
      </el-form-item>
      <el-form-item label="个性签名" prop="autograph">
        <el-input v-model="loginUser.autograph"></el-input>
      </el-form-item>
        <el-button type="primary" @click="editUser">保存</el-button>
    </el-form>
  </div>
</div>
</template>

<script>
export default {
  name: "UserInfo",
  data() {
    let checkEmail = (rule, value, cb) => {
      const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
      //匹配失败返回true
      if (regEmail.test(value)){
        return cb()
      }
      cb(new Error('请输入合法的邮箱'))
    }
    let checkMobile = (rule, value, cb) => {
      const regMobile = /^(0|86|17951)?(13[0-9]|15[0123456789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
      if (regMobile.test(value)){
        return cb()
      }
      cb(new Error('请输入合法的手机号码'))
    }
    return {
      //[]表示的是数组对象，{}表示的是对象；
      picDialog:false,
      loginUser:{},
      pics:[],
      pictureList:[],
      picSrc:"",
      deletePicList:[],

      //验证表单规则对象
      loginUserRules: {
        userName: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入电子邮箱', trigger: 'blur' },
          { validator: checkEmail, trigger: 'blur'}
        ],
        phoneNumber: [
          //trigger触发
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          { validator: checkMobile, trigger: 'blur'}
        ],
        sex: [
          { required: true, message: '请选择性别', trigger: 'change' }
        ],
        birthday: [
          { required: true, message: '请选择生日', trigger: 'change' }
        ]
      }
    }
  },
  created() {
    this.getUser()
  },
  methods:{
    async getUser(){
      //window.sessionStorage.getItem('loginUser')).userId 从session中拿到userID
      const { data : res } = await axios.get('sysUser/'+JSON.parse(window.sessionStorage.getItem('loginUser')).userId)
      this.loginUser = res.data
      //放入图片的地址
      this.pics.push({name:'picture',url:JSON.parse(this.loginUser.userPicture)[0]})
    },
    async handleSuccess(response, file, fileList){
      this.pics = fileList
      console.log(this.pics)
      await this.submitFile()
      this.picSrc = this.pictureList[0]
    },
    handleError(err){
      console.log(err)
    },
    handleChange(file, filelist){
      this.pics = filelist.slice(0)
      // console.log(111)
      console.log(this.pics)
      this.picDialog =true
    },
    handleRemove(file) {
      const filePath = file.url
      console.log(filePath)
      const idx = this.pics.findIndex(x => x.url === filePath)
      if(file.status === 'success'){
        this.deletePicList.push(file.url)
      }
      this.pics.splice(idx, 1)
    },
     //编辑editUser
     async editUser(){
       //上传图片文件
       await this.submitFile()
       this.loginUser.userPicture = JSON.stringify(this.pictureList)
       const _this = this
       let success = true
       axios.defaults.headers.put['Content-Type'] = 'application/json'
       await axios.put('sysUser',JSON.stringify(this.loginUser)).then(resp=>{
         if (resp.data.code !== 200){
           this.$message.error('修改用户信息失败！')
           success = false
         }
       })
       if(!success) return
       this.$message.success('修改用户信息成功!')
       //重置pics和pictrueList
       this.pics = []
       this.pictureList = []
       //重新获取用户
       await this.getUser()
       this.picDialog = false
    },
    //上传图片文件
    async submitFile(){
      const _this = this
      for (let i = 0; i < this.pics.length; i++){
        let formData = new FormData()
        if (this.pics[i].status === 'success') {
          let s = this.pics[i].url
          this.pictureList.push(s.substring(s.indexOf('/images')))
          continue
        }
        let file = this.pics[i].raw
        formData.append('file', file)
        //
        await axios.post('upload/user', formData).then(response =>{
          console.log(response)
          _this.pictureList.push(response.data.data)
        })
      }
    },
    handleExceed(){
      this.$message.error("用户头像最多上传一张！")
    },
  }
}
</script>
<!--flex ： "弹性布局"，用来为盒状模型提供最大的灵活性-->
<style scoped>
.user-info-container{
  display: flex;
}
</style>

请求与响应

上传图片

修改个人基本信息