Vue + elementUI使用 upload 上传组件进行单张照片回显(把数据库中的照片拿出来再显示)

index.vue 页面

methods: {
  toEdit() { // 传输当前行数据到form.vue页面
    this.$refs.form.editOps(this.selections[0])
  }
}

form.vue 页面

<template>
  <div>
    <el-dialog title="查看图片" :visible.sync="dialog" width="800px">
      <el-form :inline="true" :model="formData" size="small">
        <el-form-item label="照片">
          <el-upload
            class="avatar-uploader"
            :show-file-list="false"
            :on-success="handleSuccess"
            :on-error="handleError"
            :before-upload="beforeUpload">
            <img v-if="this.formData.img" :src="this.formData.img" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon" />
          </el-upload>
        </el-form-item>
      </el-form>
      <dl class="picRule clearfix"> <!--底部提示-->
        <dt class="picRule-title">照片规范:</dt>
        <dd class="picRule-item">
          <i class="el-icon-check picRule-icon-right" />
          <span>单张标准</span>
        </dd>
        <dd class="picRule-item">
          <i class="el-icon-close picRule-icon-wrong" />
          <span>边角缺失</span>
        </dd>
        <dd class="picRule-item">
          <i class="el-icon-close picRule-icon-wrong" />
          <span>信息模糊</span>
        </dd>
        <dd class="picRule-item">
          <i class="el-icon-close picRule-icon-wrong" />
          <span>多张混合</span>
        </dd>
      </dl>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialog: false, formData: {}
    }
  },
  methods: {
    handleSuccess(res) { // 上传照片
      this.upload = true
      this.formData.img = res.data[0]
    },
    beforeUpload(file) { // 上传照片之前的检查
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG 或 PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    handleError(e) { // 上传错误进行处理
      this.failTips(e.message ? e.message : '上传失败')
    },
    editOps(data) { // 得到index.vue传过来的数据
      this.dialog = true
      this.formData = { ...data }
    }
  }
}
</script>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
  .avatar {
    width: 100px;
    height: 100px;
    display: block;
  }

  .picRule {
    margin: 0 0 0 136px;
    height: 34px;
    padding-left: 20px;
    line-height: 34px;
    width: 473px;
    background: #fff8e0;
    font-size: 12px;
    color: #84849a;
  }
  .picRule-title {
    float: left;
  }
  .picRule-item {
    float: left;
    margin-left: 20px;
  }
  .picRule-icon-wrong {
    background-image: -webkit-gradient(linear,left top,left bottom,from(#f25cce),to(#e12fa0));
    background-image: linear-gradient(180deg,#f25cce,#e12fa0);
    font-size: 14px;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 4px;
    border-radius: 50%;
    color: #fff;
    line-height: 20px;
    text-align: center;
    -webkit-transform: scale(.6);
    transform: scale(.6);
  }
  .picRule-icon-right {
     background-image: -webkit-gradient(linear,left top,left bottom,from(#42d8bd),to(#1faf88));
     background-image: linear-gradient(180deg,#42d8bd,#1faf88);
     font-size: 14px;
     display: inline-block;
     width: 20px;
     height: 20px;
     margin-right: 4px;
     border-radius: 50%;
     color: #fff;
     line-height: 20px;
     text-align: center;
     -webkit-transform: scale(.6);
     transform: scale(.6);
   }
</style>