上传多个文件之前可以预览文件（pdf 和图片）--缩略图

上传文件之前实现预览的功能；文件的类型限于pdf和图片.

基于ant-desigh和vue-pdf插件实现文件上传之前能预览、有分页的功能。（既有图片也有pdf文件）

先上效果图：(多个文件上传预览)

 

 

 

代码如下：

DOM结构：

<template>
  <div class="home">
    <div class="wrap">
      <div class="wrap-upload-div">
        <a-icon type="plus" class="plus" />
        <div class="ant-upload-text">上传文件</div>
        <div class="ant-upload-text" style="color:red;">{
  {showErr}}</div>
        <input class="file-upload-input" type="file" @change="fileChange" multiple />
      </div>
      <div v-if="pdf!=[]" class="pdf-image-small">
        <div
          class="pdf-small"
          v-for="(item,index) of pdf"
          :key="index"
          @click="showPdf(item.src,item.type)"
        >
          <!-- 上传文件为pdf -->
          <div class="pdf" v-if="item.type=='pdf'">
            <pdf
              v-for="i in pages"
              :page="i"
              :key="i"