一.实现效果

 

 二.入参

props: {
    defaultImg: {
      //默认位置的照片
      type: String,
      default: "",
    },
    uploadWidth: {
      //照片框的宽度
      type: String,
      default: "148px",
    },
  },

 另外如果修改了宽度的话，在外部组件需要用scss重写一下样式

/deep/ .el-upload-list--picture-card .el-upload-list__item {
            width: 245px;
        }

 三.反参

let re = {
          res,
          file,
          fileList,
        };
        this.$emit("onSuccess", re);

let re = {
        file,
        fileList,
      };
      this.$emit("onRemove", re);

提供2个方法给外部，onSuccess成功后的处理，onRemove移除照片后的处理，需要其他，就自己抛出事件，但是封装这个组件的本心是简化上传动作，因此尽量少抛出事件

四.外部调用

<OneImgUpload @onSuccess="idBackSuccess" uploadWidth="245px"
                            :defaultImg="require('../imgs/idBack.png')">
                        </OneImgUpload>

五.完整代码

<!-- 该组件仅支持单张照片的上传，类似于身份证正反面的上传，限制为10M -->
<template>
  <div class="one-img-upload">
    <el-upload
      :class="{ haveImg: haveImg }"
      action="/tjf-upp/action/website/TFileUploadAction"
      :style="{ width: uploadWidth }"
      ref="oneImgUpload"
      list-type="picture-card"
      accept=".png, .gif, .jpg, .jpeg"
      :multiple="false"
      :on-success="onSuccess"
      :on-remove="onRemove"
      :on-error="onError"
      :before-upload="beforeUpload"
    >
      <img v-if="defaultImg" class="default-img" :src="defaultImg" />
      <i v-else slot="default" class="el-icon-plus"></i>
    </el-upload>
  </div>
</template>

<script>
export default {
  name: "oneImgUpload",
  props: {
    defaultImg: {
      //默认位置的照片
      type: String,
      default: "",
    },
    uploadWidth: {
      //照片框的宽度
      type: String,
      default: "148px",
    },
  },

  data() {
    return {
      haveImg: false,
    };
  },

  methods: {
    onSuccess(res, file, fileList) {
      if (res.status == "FAILED") {
        this.haveImg = false;
        this.$message.error("文件上传失败");
        this.$refs.oneImgUpload.clearFiles();
      } else {
        this.haveImg = true;
        this.$message.success("文件上传成功");
        let re = {
          res,
          file,
          fileList,
        };
        this.$emit("onSuccess", re);
      }
    },

    onRemove(file, fileList) {
      this.haveImg = false;
      let re = {
        file,
        fileList,
      };
      this.$emit("onRemove", re);
    },

    onError(res, file, fileList) {
      this.haveImg = false;
      this.$message.error("文件上传失败");
    },

    beforeUpload(file) {
      let msg = "";
      var fileType = file.name.replace(/.+\./, ""); //文件类型
      if (
        ["jpg", "png", "gif", "jpeg"].indexOf(fileType.toLowerCase()) === -1
      ) {
        msg = "请上传后缀名为jpg,png,gif,jpeg的附件！";
      }

      let size = file.size / 1024 / 1024 / 2;
      if (size > 10) {
        msg = "图片大小必须小于10M";
      }

      if (msg) {
        this.$message.error(msg);
        return false;
      }
    },
  },
};
</script>
            
       <style lang="scss" scoped>
.one-img-upload {
  width: 100%;

  .default-img {
    width: 100%;
  }

  /deep/.el-upload--picture-card {
    width: auto;
    min-width: 148px;
  }

  .haveImg {
    /deep/.el-upload--picture-card {
      display: none;
    }
  }
}
</style>