ibms/src/views/data_admin/buildGraphy/lib/uploadFiles.vue

<!--
  上传组件
  type: 类型，默认image
  identify: key值，通过val获取
  disabled: 是否可用
  index: 父组件的下标
  imageIndex: 图片下标
  isShow: 图片的显示
 -->
<template>
  <div id="saga-upload">
    <div id="uploadFile">
      <div v-if="item && filesArr.length" v-for="(item,index) in filesArr">
        <el-button type="text" @click="download(item)">{{delFile(item)}}</el-button>
        <i
          v-if="!readOnly"
          class="el-icon-close delete-icon"
          style="margin-left:10px; cursor:pointer"
          @click="deleteFile(index,item)"
        ></i>
      </div>
      <el-upload
        v-if="filesArr.length < max"
        class="upload-file"
        action
        :http-request="uploadAndSubmit"
        :show-file-list="false"
        drag
      >
        <el-button size="small" type="primary" v-if="!readOnly">点击上传</el-button>
        <div slot="tip" class="el-upload__tip" v-if="!readOnly">请上传文件</div>
      </el-upload>
    </div>
  </div>
</template>

<script>
import tools from "@/utils/scan/tools";
export default {
  props: {
    keysArr: {
      type: [Array, String],
      default: function () {
        return []
      }
    },
    readOnly: {
      type: Boolean,
      default: false
    },
    max: {
      type: [Number, String],
      default: 6
    },
    defined: null
  },
  data() {
    return {
      filesArr: []
    };
  },
  created() {
    let type = typeof (this.keysArr)
    this.fileFalg()
  },
  methods: {
    //判断是否为空
    fileFalg() {
      let type = typeof (this.keysArr)
      console.log(this.keysArr, "keysAee")
      if (type == 'string') {
        this.filesArr = [this.keysArr]
      } else {
        this.filesArr = tools.deepCopy(this.keysArr)
      }

      if (!this.keysArr) {
        this.filesArr = []
      }
    },
    //处理地址
    delFile(name) {
      console.log(name, "name")
      return name.length > 20 ? name.substring(0, 20) + "..." : ""
    },

    resetFile() {
      this.filesArr = []
    },


    //点击下载
    download(key) {
      console.log(key)
      window.open("/image-service/common/file_get/" + key + "?systemId=dataPlatform")
    },

    //删除图片
    deleteFile(i, key) {
      this.filesArr.splice(i, 1);
      this.$emit("change", this.filesArr, this.defined);
    },

    //上传
    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];
      let key = "&key=" + fileType[0] + file.uid + "." + type

      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 */
            "/img/image-service/common/file_upload?systemId=dataPlatform&secret=9e0891a7a8c8e885&overwrite=true" + key
            /*, async, default to true */
          );
          //xhr.overrideMimeType("application/octet-stream");
          xhr.send(reader.result);
          xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) {
              console.log(xhr)
              if (xhr.status == 200) {
                vm.filesArr.push(
                  key.split("=")[1]
                );
                console.log(vm.filesArr)
                vm.$emit("change", vm.filesArr, vm.defined);
              } else {
                this.$message.error(res.data.ResultMsg)
              }
            }
          };
        }
      };
      reader.readAsArrayBuffer(file);
    }
  },
  watch: {
    keysArr: function (val) {
      this.fileFalg()
    }
  }
};
</script>

<style lang="less">
#saga-upload {
  .dill-image {
    position: absolute;
    right: 0px;
    top: 0px;
    font-size: 20px;
  }
  .el-upload-dragger {
    width: 180px;
    height: 180px;
  }
  img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
  }
  #uploadFile {
    .upload-file {
      overflow: hidden;
      .el-upload-dragger {
        width: inherit;
        height: inherit;
        border: none;
      }
    }
  }
}
</style>