<template>
  <el-upload
    class="avatar-uploader"
    :action="action"
    :headers="headers"
    :show-file-list="false"
    :on-success="handleImageSuccess"
    :before-upload="beforeImageUpload"
    :http-request="httpRequest"
  >
    <img v-show="imageUrl!=''" :src="imageUrl" class="avatar">
    <svg v-show="showDefault && imageUrl==''" t="1564385213054" class="icon" viewBox="0 0 1302 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5507" width="100%"><path d="M119.299813 1024a129.738546 129.738546 0 0 1-84.504034-34.795779 141.171445 141.171445 0 0 1-34.795779-84.504034V124.28058A142.662693 142.662693 0 0 1 34.795779 34.80572 116.317317 116.317317 0 0 1 119.299813 0.009942h1063.756662a120.79106 120.79106 0 0 1 119.299813 119.299812v780.419608a120.79106 120.79106 0 0 1-119.299813 119.299812H119.299813z m0-939.486024a70.585722 70.585722 0 0 0-29.824954 9.941651c-4.970826 4.970826-4.970826 14.912477-4.970825 29.824953v780.419607a70.585722 70.585722 0 0 0 9.941651 29.824954c4.970826 9.941651 14.912477 9.941651 29.824953 9.941651h1063.756663a42.7491 42.7491 0 0 0 39.766604-39.766605V124.28058a42.7491 42.7491 0 0 0-39.766604-39.766604z" fill="#CACACA" p-id="5508"></path><path d="M929.544373 959.379268c-9.941651 0-14.912477-4.970826-24.854127-9.941651L551.761633 596.509005l-323.103659 328.074484a36.287026 36.287026 0 0 1-29.824953 9.941652 42.7491 42.7491 0 0 1-29.824953-14.912477 45.234512 45.234512 0 0 1 0-59.649906l347.957787-352.928613a36.287026 36.287026 0 0 1 29.824953-9.941651 70.585722 70.585722 0 0 1 29.824953 9.941651l382.753566 387.724391a49.708255 49.708255 0 0 1 9.941651 44.73743 39.269522 39.269522 0 0 1-39.766605 24.854128z" fill="#CACACA" p-id="5509"></path><path d="M1138.319045 904.700187a42.7491 42.7491 0 0 1-29.824953-14.912476l-173.978893-183.920545-104.387336 104.387336a35.292861 35.292861 0 0 1-29.824953 14.912477h-9.941651a44.73743 44.73743 0 0 1-29.824954-29.824953 38.772439 38.772439 0 0 1 9.941652-39.766604l134.212289-134.21229c4.970826-9.941651 19.883302-9.941651 29.824953-9.941651a35.292861 35.292861 0 0 1 29.824953 14.912477l203.803847 218.716323a49.708255 49.708255 0 0 1 9.941651 44.73743 94.942768 94.942768 0 0 1-39.766605 14.912476zM820.186212 447.384239a122.77939 122.77939 0 0 1-114.328987-79.533208 130.235629 130.235629 0 0 1 24.854127-139.183115 124.270638 124.270638 0 0 1 89.47486-39.766604 176.464306 176.464306 0 0 1 49.708255 9.941651 122.77939 122.77939 0 0 1 79.533208 114.328987A129.738546 129.738546 0 0 1 820.186212 447.384239z m-9.941651-169.008068a49.708255 49.708255 0 0 0-29.824953 24.854128 49.708255 49.708255 0 0 0 9.941651 49.708255 42.7491 42.7491 0 0 0 29.824953 14.912477 18.392054 18.392054 0 0 0 14.912476-4.970826 49.708255 49.708255 0 0 0 29.824954-39.766604 44.73743 44.73743 0 0 0-44.73743-44.73743z" fill="#CACACA" p-id="5510"></path></svg>
  </el-upload>
</template>

<script>
  import uploadAPI from '@/api/uploadAPI'
  import {getToken} from '@/utils/auth'

  export default {
    name: 'SingleImageUpload',
    props: {
      value: {default: ''},
      showDefault: {default: true}
    },
    data () {
      return {
        imageUrl: '',
        action: uploadAPI.imageUploadUrl,
        headers: {
          'X-TOKEN': getToken()
        }
      }
    },
    created () {
    },
    methods: {
      httpRequest (e) {
        uploadAPI.uploadImage(e.file).then((res, file) => {
            this.handleImageSuccess(res, file);
          }
        );
      },
      beforeImageUpload (file) {
        let isImages = this.$utils.file.fileIsImage(file.type);
        if (!isImages) {
          this.$message.error('上传图片格式错误!');
          return false;
        }
        // this.$utils.file.zipImage(file).then(flie => {
        //
        // })
        let isLt2M = this.$utils.file.fileSizeLimit(file, 2);
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!')
        }
        return isImages && isLt2M
      },
      handleImageSuccess (res, file) {
        this.imageUrl = uploadAPI.serverUrl + res.data.previewUrl;// URL.createObjectURL(file.raw);
        this.$emit('change', this.imageUrl);
      }
    }
  }
</script>

<style scoped>
  .avatar {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    display: block;
  }
</style>
