<template>
    <el-upload
    class="avatar-uploader"
    :http-request="uploadAndSubmit"
    :show-file-list="false"
    accept="image/*"
    action=""
    drag
    style="position: relation"
    >
        <i class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
</template>

<script>
export default {
  props: {
    keyName: {
      type: String,
      default: ""
    }
  },
  methods: {
    uploadAndSubmit(item) {
      // var form = document.forms["demoForm"];

      // if (form["file"].files.length > 0) {
      // 寻找表单域中的 <input type="file" ... /> 标签
      // var file = form["file"].files[0];

      let file = item.file;
      // try sending
      let reader = new FileReader();

      let vm = this;

      let fileType = file.name.split('.')
      let type = fileType[fileType.length -1]

      reader.onloadstart = function() {
        // 这个事件在读取开始时触发
      };
      reader.onprogress = function(p) {
        // 这个事件在读取进行中定时触发
      };

      reader.onload = function() {
        // 这个事件在读取成功结束后触发
      };

      reader.onloadend = function() {
        // 这个事件在读取结束后，无论成功或者失败都会触发
        if (reader.error) {
        } else {
          // document.getElementById("bytesRead").textContent = file.size;
          // 构造 XMLHttpRequest 对象，发送文件 Binary 数据
          var xhr = new XMLHttpRequest();
          xhr.open(
            /* method */ "POST",
            /* target url */
            "/image-service/common/image_upload?systemId=dataPlatform&secret=9e0891a7a8c8e885&overwrite=true&key=" +
              file.uid + '.' + type
            /*, async, default to true */
          );
          //xhr.overrideMimeType("application/octet-stream");
          xhr.send(reader.result);
          xhr.onreadystatechange = function() {
            if (xhr.readyState == 4) {
              if (xhr.status == 200) {
                vm.$emit("getKey", file.uid + '.' + type, vm.keyName);
              }
            }
          };
        }
      };
      reader.readAsArrayBuffer(file);
    }
  }
};
</script>

<style lang="less">
.point-pic {
  .avatar-uploader {
    height: 180px;
    width: 180px;
    overflow: hidden;
    .el-upload {
      width: 100%;
      height: 100%;
      .el-upload-dragger{
        width: 100%;
        height: 100%;
        .el-icon-plus{
          display: block;
          width: 20px;
          height: 20px;
          font-size: 20px;
          margin: 80px;
        }
      }
    }
  }
}
.el-dialog__body{
  max-height: 600px;
  overflow-y: auto;
}
</style>