element ui的el-upload的picture-card类型实现单图片选择上传

这是一个dialog组件，需要传入dialog:{show:true, title: ‘标题’}和form:{}才能显示

<template>
  <div class='dialog-module'>
    <el-dialog width="300px"
               destroy-on-close
               :title="dialog.title + '模块'"
               :visible.sync="dialog.show"
               :before-close="() => { dialog.show = false }">

      <el-form :model="form"
               ref="form"
               hide-required-asterisk
               label-width="84px">
        <div class="form__head">
          <!-- 图片显示 -->
          <el-image :src="form.icon"
                    class="form__head-icon">
            <div slot="error"
                 class="image-slot">
              <i class="el-icon-picture-outline"
                 style="font-size:32px"></i>
            </div>
          </el-image>
          <!-- 图片上传 -->
          <el-upload class="form__head-icon-upload"
                     action="https://jsonplaceholder.typicode.com/posts/"
                     list-type="picture-card"
                     :class="{hide:hideUpload}"
                     :file-list="fileList"
                     :limit="1"
                     :auto-upload="false"
                     :on-change="handleChange"
                     :on-preview="handlePictureCardPreview"
                     :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
        </div>
        
        <el-form-item label="模块名称："
                      prop="label"
                      :rules="{ required: true, message: '模块名不能为空', trigger: 'blur' }">
          <el-input v-model="form.label"
                    style="width:100%;"
                    placeholder="请输入模块名称"></el-input>
        </el-form-item>

        <el-form-item label="链接："
                      prop="link"
                      :rules="{ required: true, message: '链接不能为空', trigger: 'blur' }">
          <el-input v-model="form.link"
                    style="width:100%;"
                    placeholder="请输入链接"></el-input>
        </el-form-item>

      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="dialog.show = false">取消</el-button>
        <el-button type="primary"
                   @click="handle('form')">{{ dialog.title }}</el-button>
      </span>

      <el-dialog :visible.sync="dialogVisible">
        <img width="100%"
             :src="dialogImageUrl"
             alt="">
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>

export default {
  name: 'DialogModule',
  props: {
    form: Object,
    dialog: Object
  },
  data () {
    return {
      action: '',
      hideUpload: false, // 控制选择框是否显示的开关
      fileList: [],
      dialogImageUrl: '',
      dialogVisible: false
    }
  },
  methods: {
    handleChange (file, fileList) {
      this.hideUpload = fileList.length > 0
    },
    handleRemove (file, fileList) { // 防止出场动画未结束，选择框提前出现
      setTimeout(() => {
        this.hideUpload = fileList.length > 0
      }, 520)
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    }
  }
}
</script>

<style scoped>
.dialog-module >>> .el-upload--picture-card {
  width: 100px;
  height: 100px;
  line-height: 100px;
}

.form__head {
  display: flex;
  justify-content: space-around;
  padding: 10px 2px;
  flex-wrap: nowrap;
}

.form__head-icon-upload {
  height: 100px;
  width: 100px;
}

.dialog-module >>> .form__head-icon {
  width: 100px;
  height: 100px;
  border: 1px solid #c0ccda;
  text-align: center;
  line-height: 100px;
  box-sizing: border-box;
  border-radius: 4px;
  flex-shrink: 1;
}

.dialog-module >>> .el-upload-list__item {
  width: 100px;
  height: 100px;
}
</style>

<style>
// 控制显示的主要css
.hide .el-upload--picture-card {
  display: none;
}
</style>

效果展示