上传文件之前实现预览的功能;文件的类型限于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"