vue+kkFileView-4.1.0实现文件的预览

kkFileView4.1.0码云地址
直接上代码：

<template>
  <div class="app-container">
    <el-form ref="queryForm" :inline="true">
      <el-form-item label="探索" style="margin-left: 30px;">
        <el-tree class="tree-border" :data="treeLabel1" ref="lable1" show-checkbox empty-text="加载中，请稍候"
          :props="defaultProps" node-key="labelId" @check="(click, checked) => { handleCheckChange1(click, checked) }"
          style="width: 250px;"></el-tree>
      </el-form-item>

      <el-form-item label="文创" style="margin-left: 30px;">
        <el-tree class="tree-border" :data="treeLabel2" show-checkbox ref="lable2" empty-text="加载中，请稍候"
          :props="defaultProps" node-key="labelId" @check="(click, checked) => { handleCheckChange2(click, checked) }"
          style="width: 250px;"></el-tree>
      </el-form-item>

      <el-form-item label="地图" style="margin-left: 30px;">
        <el-tree class="tree-border" :data="treeLabel3" ref="lable3" show-checkbox empty-text="加载中，请稍候"
          :props="defaultProps" node-key="labelId" @check="(click, checked) => { handleCheckChange3(click, checked) }"
          style="width: 250px;"></el-tree>
      </el-form-item>

    </el-form>

    <el-card>
      <el-row :gutter="20">

        <el-col :span="6" v-for="(item, i) in resourceList" :key="i">
          <div class="grid-content">
            <!-- <img v-show="item.resourceType==1" :src="url + item.resourceUrl" /> -->
            <viewer v-show="item.resourceType == 1">
              <img :src="url + item.resourceUrl">
            </viewer>
            <video v-show="item.resourceType == 2" :src="url + item.resourceUrl"
              @click="previewVideo(url + item.resourceUrl)" />
            <svg-icon v-show="item.resourceType == 4"  v-if="item.icon"
                        class-name="wenicon"
                        :iconClass="item.icon"
                        :style="{fontSize:'30px',fill:item.fill}"
              @click="previewText(url + item.resourceUrl)"></svg-icon>
            <div class="name">{{ item.resourceAlias }}</div>
            <div class="types" v-show="item.resourceType == 1">图片</div>
            <div class="types" v-show="item.resourceType == 2">视频</div>
            <div class="types" v-show="item.resourceType == 3">全景</div>
            <div class="types" v-show="item.resourceType == 4">文本</div>
          </div>
        </el-col>

        <v-overlay :absolute="false" :value="videoModal">
          <v-icon @click="videoModal = false"
            style="font-size:30px;position: absolute;top:-15px;right:-15px;z-index:2;cursor:pointer;">
            mdi-close-circle-outline</v-icon>
          <div class="input_video">
            <video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true"
              :options="playerOptions"></video-player>
          </div>
        </v-overlay>

      </el-row>
    </el-card>

    <pagination v-show="total > 0" :total="total" :page-sizes="[8]" :page.sync="pageParams.pageNum"
      :limit.sync="pageParams.pageSize" @pagination="getList" />

  </div>
</template>

<script>
import {
  listLabel,
  listTree,
  listResource
} from "@/api/resource/label.js";
let Base64 = require('js-base64').Base64
export default {
  name: "Role",
  dicts: ['sys_normal_disable'],
  data() {
    return {
      // 总条数
      total: 0,
      queryParams: {
        labelId: 0
      },
      pageParams: {
        pageNum: 1,
        pageSize: 8
      },
      defaultProps: {
        children: "children",
        label: "labelName",
      },
      labelLists: [],
      treeLabel1: [],
      treeLabel2: [],
      treeLabel3: [],
      resourceList: [],
      paramList: [0],
      defaultList: [31],
      treeId1: undefined,
      treeId2: undefined,
      treeId3: undefined,
      url: process.env.VUE_APP_BASE_API,
      videoModal: false,
      playerOptions: {
        playbackRates: [0.5, 1.0, 1.5, 2.0],//倍速控制
        autoplay: true,//是否自动播放
        muted: false,//是否静音播放
        loop: false,//是否循环播放
        preload: "auto",
        language: "zh-CN",
        aspectRatio: "16:9",//比例
        fluid: true,
        sources: [
          {
            type: "",
            src: "", //url地址
          },
        ],
        poster: "", //你的封面地址
        notSupportedMessage: "此视频暂无法播放，请稍后再试",
        controlBar: {
          timeDivider: true,
          durationDisplay: true,//剩余时间是否显示
          remainingTimeDisplay: true,//剩余时间是否显示，有一个即可
          fullscreenToggle: true,//全屏按钮
        },
      },
    };
  },
  created() {
    this.getLabel();
    this.getList();
  },
  methods: {
    previewText(textUrl) {
      var url = 'http://localhost' + textUrl; //要预览文件的访问地址
      window.open('http://127.0.0.1:8012/onlinePreview?url=' + encodeURIComponent(Base64.encode(url)));
    },
    previewVideo(videoUrl) {
      this.videoModal = true
      this.playerOptions.sources[0].src = videoUrl
    },
    // 获取选择的节点数组
    handleCheckChange1(click, checked) {
      this.paramList = checked.checkedKeys;
      this.$refs.lable2.setCheckedKeys([])
      this.$refs.lable3.setCheckedKeys([])
      this.getList();
    },
    handleCheckChange2(click, checked) {
      this.paramList = checked.checkedKeys;
      this.$refs.lable1.setCheckedKeys([])
      this.$refs.lable3.setCheckedKeys([])
      this.getList();
    },
    handleCheckChange3(click, checked) {
      this.paramList = checked.checkedKeys;
      this.$refs.lable1.setCheckedKeys([])
      this.$refs.lable2.setCheckedKeys([])
      this.getList();
    },
    // 获取资源列表
    getList() {
      this.paramList = this.paramList.length > 0 ? this.paramList : [0]
      listResource(this.pageParams, this.paramList).then(response => {
        var obj = {}
        if (response.rows instanceof Array) {
          let arr = response.rows.map((d, i) => {
            obj[d.id] = d
            let item = this.$lookupIcon(d.suffix.slice(1))
            if (item) {
              d.icon = item.icon
              d.fill = item.fill
            } else {
              item = this.suffixFilter(d.resourceType)
              d.icon = item.icon
              d.fill = item.fill
            }
            return d
          })
          this.resourceList = arr
        }
        this.total = response.total
      });
    },
    /** 查询标签列表 */
    async getLabel() {
      let querys = {
        parentId: 0
      }
      let res = await listLabel(querys)
      this.labelLists = res.data
      this.getTree();
    },

    /** 查询资源标签树列表 */
    getTree() {
      listTree().then(response => {
        this.treeLabel1 = this.handleTree(response.label_1, "labelId");
        this.treeLabel2 = this.handleTree(response.label_2, "labelId");
        this.treeLabel3 = this.handleTree(response.label_4, "labelId");
      });
    },
    suffixFilter(val) {
      // resourceType
      switch (parseInt(val)) {
        case 1:
          return this.$lookupIcon('image')
        case 2:
          return this.$lookupIcon('video')
        case 3:
          return this.$lookupIcon('audio')
        case 4:
          return this.$lookupIcon('file')
        default:
          return this.$lookupIcon('unknown')
      }
    },

  }
};
</script>
<style scoped="scoped">
.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
  margin-bottom: 30px;
}

.grid-content {
  border-radius: 14px;
  min-height: 36px;
  color: white;
  font-size: 14px;
}

.grid-content img {
  max-width: 100%;
  height: 100px;
  border-radius: 14px;
}

.grid-content video {
  width: 100%;
  height: 100px;
  border-radius: 14px;
}

.grid-content .name {
  padding: 0 5px;
  overflow: hidden;
  width: 70%;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background-color: #1890FF;
  float: left;
  border-radius: 14px;
  opacity: 0.7;
}

.grid-content .types {
  width: 25%;
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: #1890FF;
  background-color: white;
  border: 1px solid #1890FF;
  border-radius: 14px;
  float: right;
  opacity: 0.7;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.input_video {
  width: 1000px;
  height: 600px;
  margin: 0 auto;
}

.wenicon {
  width: 100px;
  height: 100px;
  margin-bottom: 10px;
}
</style>