vue2封装单张图片上传（常用于身份证正反面）

一.实现效果

 

 二.入参

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移除照片后的处理，需要其他，就自己抛出事件，但是封装这个组件的本心是简化上传动作，因此尽量少抛出事件

四.外部调用

五.完整代码