优化文件上传pdf显示

src/components/UploadImagePdf/index.vue

@@ -2,7 +2,11 @@
 <template>
   <div class="upload-box">
     <div class="box-lf">
-      <van-uploader accept="*" :disabled="isChecked" v-model="localFileList" @click-preview="handleClickUpload" :before-read="handleFileBeforeRead" :before-delete="handleBeforeDel" :max-count="1" :after-read="handleAfterRead" />
+      <van-uploader accept="*" :disabled="isChecked" v-model="localFileList" @click-preview="handleClickUpload" :before-read="handleFileBeforeRead" :before-delete="handleBeforeDel" :max-count="1" :after-read="handleAfterRead">
+        <template #preview-cover="{ file }" v-if="checkFileType(localFileList)">
+          <div class="preview-cover">{{handleFilter(localFileList)}}</div>
+        </template>
+      </van-uploader>
       <div class="up-tt">支持png、pdf、jpg格式上传</div>
     </div>
     <div class="box-rt">
@@ -57,6 +61,11 @@ export default {
       handler(list) {
         // this.localFileList = list
         this.localFileList = list
+        // if (Array.isArray(this.localFileList) && this.localFileList.length) {
+        //   let url = localFileList[0].url
+        //   if ()
+        //     console.log('localFileList...', this.localFileList);
+        // }
         this.uploadList = list
       },
       deep: true,
@@ -79,6 +88,24 @@ export default {
 
 
   methods: {
+    handleFilter(file) {
+      let str = ''
+      if (file.length) {
+        let url = file[0].url
+        str = url.split('/baoxiao/')[1]
+      }
+      return str
+    },
+    checkFileType(file) {
+      let flag = false
+      if (file.length) {
+        let url = file[0].url
+        if (url.indexOf('pdf') > -1) {
+          flag = true
+        }
+      }
+      return flag
+    },
     handleClickUpload(file) {
       const { url } = file
       if (url) {
@@ -203,6 +230,15 @@ export default {
 
 </script>
 <style lang='scss' scoped>
+::v-deep .preview-cover {
+  height: 100%;
+  background: #fafafa;
+  display: flex;
+  justify-items: center;
+  align-items: center;
+  text-align: center;
+  width: 100%;
+}
 .upload-box {
   width: 100%;
   display: flex;

src/views/company/invoice/index.vue

@@ -131,7 +131,7 @@
 </template>
 
 <script>
-import dayjs from 'dayjs';
+import dayjs from 'dayjs'
 import {
   deleteInvoice01,
   deleteInvoice02,