图片上传

<template>
  <el-upload
    class="avatar-uploader"
    action="/adm/reviewClient/upload"
    :data="uploadData"
    :show-file-list="false"
    :accept="['.jpg','.png','.jpeg']"
    :auto-upload="true"
    :on-success="handleAvatarSuccess"
    :before-upload="beforeAvatarUpload"
  >
    <div slot="trigger" style="width: 100%; height: 100%">
      <slot name="triggerBtn"></slot>
    </div>
  </el-upload>
</template>
<script>
export default {
  name: 'UploadImage',
  props: {
    fileType: {
      type: Array,
      default() {
        return ['image/jpg', 'image/png', 'image/jpeg'] //png  jpg  jepg
      },
    },
    errorTypeTip: {
      type: String,
      default: '上传图片只能是 JPG 、 PNG 或 JPEG 格式!',
    },
  },
  data() {
    return {
      uploadData: {

      },
    }
  },
  computed: {},
  mounted() {

  },
  methods: {
    beforeAvatarUpload(file) {
      const type = this.fileType.includes(file.type)
      if (!type) {
        this.$message.warning(this.errorTypeTip)
        return false
      }
      return true
    },
    handleAvatarSuccess(response, file, fileList) {
      if (response.code === '0') {
        this.$emit('getImg', {
         ...response.data
        })
      }
    },
  },
}
</script>
<style>
.avatar-uploader >>> .el-upload {
  position: relative;
  background-color: #ccc;
}

.avatar-uploader >>> .el-upload .avatar-uploader-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
}

.avatar-uploader >>> .el-upload {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
</style>