src/views/information/index.vue

<template>
  <div class="">
        <!--卡片-->
        <el-row :gutter="16" class="">
          <el-col :span="8">
            <el-card class="box-card">
              <el-upload
                class="avatar-uploader text-center"
                action="https://jsonplaceholder.typicode.com/posts/"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :on-remove="handleRemove"
                :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
              <!--<el-button  class="text-center" size="small" type="primary">点击上传</el-button>-->
              <!--<div slot="tip" class="el-upload__tip"></div>-->
              <div class="common-color text-center" style="line-height: 30px">15143234323</div>
              <div class="font-size12 text-center" style="line-height: 30px">支持JPG格式且小于5MB</div>
              <div class="font-size12 text-center" style="height: 146px"> </div>
            </el-card>
          </el-col>
          <el-col :span="16">
            <el-card class="box-card">
             <!-- <div slot="header" class="clearfix" style="line-height: 32px;">
                <span>个人资料</span>
              </div>-->
              <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px">
                <el-form-item label="姓名" class="margin-bottom30" prop="username">
                  <el-input v-model="ruleForm.username" style="width: 300px"></el-input>
                </el-form-item>
                <el-form-item label="性别" class="margin-bottom30" prop="sex">
                  <el-select  v-model="ruleForm.sex" style="width: 300px">
                    <el-option label="男" value="1"/>
                    <el-option label="女" value="2"/>
                  </el-select>
                </el-form-item>
                <el-form-item label="生日" class="margin-bottom30" prop="birthday">
                  <el-date-picker
                    v-model="ruleForm.birthday"
                    type="date"
                    placeholder="选择日期" style="width: 300px">
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="年龄" class="margin-bottom30" prop="num">
                  <el-input-number v-model="ruleForm.num" @change="handleChange" :min="1" :max="150"  style="width: 300px"></el-input-number>
                </el-form-item>
                <el-form-item label="位置" class="margin-bottom30" prop="address">
                  <el-input type="text" v-model="ruleForm.address" style="width: 300px"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                  <el-button @click="resetForm('ruleForm')">取消</el-button>
                </el-form-item>
              </el-form>
            </el-card>
          </el-col>
        </el-row>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        imageUrl: '',
        ruleForm: {
          username: '万八',
          num: '23',
          sex:'男',
          birthday: '2019-08-17',
          address: '北京海淀区上地五街1003号'
        },
        rules: {
          username: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
          ],
          birthday: [
            { required: true, message: '请输入日期', trigger: 'blur' },
            { type: 'email', message: '请输入正确的日期', trigger: ['blur', 'change'] }
          ],
          address: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur' }
          ],
        }
      };
    },
    methods: {
      handleRemove(res, file) {
        console.log(res, file);
      },
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt5M = file.size / 1024 / 1024 < 5;
        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt5M) {
          this.$message.error('上传头像图片大小不能超过 5MB!');
        }
        return isJPG && isLt5M;
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>
<style lang="scss" >
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 50%;
    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;
  }
  .margin-bottom30{
    margin-bottom: 30px;
  }
</style>