ibms/src/components/ledger/details/detail/lookFile.vue

<template>
  <div class="exhibition-file">
    <div v-if="Object.keys(exhibitionFile.list).length">
      <div v-for="(val,key,i) in exhibitionFile.list" :key="i">
        <div class="" v-for="(j,index) in val">
          <p class="title">{{key}}</p>
          <div v-if="j.fileList !=undefined && j.fileList.length">
            <div v-for="(item,index) in j.fileList" class="content">
              <!--          图标-->
              <div class="file-box" >
                <div class="file-box-left ">
                  <div class="file-box-left-content ">
                    <span class="iconfont icon-Excel excel fs20"></span>
                  </div>
                </div>
                <div class="file-box-center">
                  <p style="margin-top: 20px"> {{delFile(item.Name)}}</p>
                  <p> {{delFile(item.CreateTime)}}</p>
                </div>
                <div class="file-box-right ">
                  <span
                    style="height: 88px;"
                    class="iconfont icon-download1 df fs20"
                    @click="download(item.Key)"/>
                </div>
              </div>

            </div>

          </div>
          <div v-else style="text-align: center;margin: 10px auto">暂无数据</div>
        </div>
      </div>
    </div>
    <div v-else style="text-align: center;margin: 10px auto">暂无数据</div>
  </div>
</template>

<script>

  export default {
    props: ['exhibitionFile'],
    data() {
      return {};
    },
    created() {
    },
    methods: {

      //处理地址
      delFile(name) {
        return name.length > 20 ? name.substring(0, 20) + "..." : name
      },
      //点击下载
      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);
      }
    },

  };
</script>

<style lang="less" scoped>
  .exhibition-file {
    .title {
      border-left: 8px solid black;
      margin: 10px;
      font-weight: 600;
      text-indent: 10px;
      display: block;
      overflow: hidden;
    }

    .df {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .file-box {
      border: 1px solid #eee;
      margin: 10px;
      height: 88px;

      .file-box-left {
        display: inline-block;
        width: 20%;
        height: 100%;
        overflow: hidden;
        text-align: center;

        .file-box-left-content {
          background: #eeeeee;
          width: 50px;
          height: 50px;
          margin: 20px 14px;
          .excel{
            display: block;
            padding-top: 5px;
          }
        }
      }

      .file-box-center {
        display: inline-block;
        width: 58%;
        height: 100%;
        overflow: hidden;
        text-align: center;
      }

      .file-box-right {
        display: inline-block;
        width: 19%;
        height: 100%;
        overflow: hidden;
      }
    }


    .df {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .fs20 {
      font-size: 20px;
    }

    .list-name {
      text-align: center;
    }
  }
</style>