ibms/src/components/ledger/lib/uploadFiles.vue

<!--
  上传组件
  type: 类型，默认image
  identify: key值，通过val获取
  disabled: 是否可用
  index: 父组件的下标
  imageIndex: 图片下标
  isShow: 图片的显示
 -->
<template>
  <div id="saga-upload">
    <div id="uploadFile">
      <el-upload
          class="upload-file"
          action
          :show-file-list="false"
          :http-request="uploadAndSubmit"
          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
          v-show="item && filesArr.length"
          v-for="(item,index) in filesArr"
      >
        <el-button
            type="text"
            @click="download(item.Key)"
        >
          {{delFile(item.Name)}}
        </el-button>
        <i
            v-if="!readOnly"
            class="el-icon-close delete-icon"
            style="margin-left:10px; cursor:pointer"
            @click="deleteFile(index,item)"
        ></i>
      </div>
    </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,
      firmDataType: {
        type: String
      },
      information: {
        type: Object
      },
      infoType: {
        type: String
      }
    },
    data() {
      return {
        filesArr: [],
        isShow: Boolean
      };
    },
    created() {
      // let type = typeof (this.keysArr)
      this.fileFalg()
      // this.resetFile()
    },
    computed: {
      showFileList() {
        if (this.firmDataType === 'dialog') {
          this.isShow = false
        } else {
          this.isShow = true
        }
        return this.isShow
      }
    },
    methods: {
      //判断是否为空
      fileFalg() {
        let type = typeof (this.keysArr)
        if (type == 'string') {
          this.filesArr = [this.keysArr]

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

      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
        let CreateTime = tools.formatDate(new Date(file.lastModified))
        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/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) {
                  let fileObject = {
                    Key: key.split("=")[1],
                    Type: type,
                    Name: file.name,
                    CreateTime,
                    SystemId: 'dataPlatform'
                  }
                  vm.filesArr.push(fileObject);
                  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>