优化文件上传pdf显示

src/components/UploadImagePdf/index.vue

@@ -2,12 +2,16 @@
 <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">
       <van-button type="info" icon="scan" :disabled="isChecked || disabled" @click="handleScan" native-type="button" class="btn-box" round size="small">发票识别</van-button>
-      <van-button v-if="type == '01'"  type="info" icon="label-o" :disabled="isChecked || disabled" @click="handleCheck" native-type="button" class="btn-box" round size="small"> {{isChecked ? '已验真' : '验真'}}</van-button>
+      <van-button v-if="type == '01'" type="info" icon="label-o" :disabled="isChecked || disabled" @click="handleCheck" native-type="button" class="btn-box" round size="small"> {{isChecked ? '已验真' : '验真'}}</van-button>
     </div>
   </div>
 </template>
@@ -50,13 +54,18 @@ export default {
     // isChecked: Boolean,
     disabled: Boolean,
     scanRes: Object,
-    type:String
+    type: String
   },
   watch: {
     fileList: {
       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,
@@ -69,7 +78,7 @@ export default {
       imgTypeArr: ['image/jpeg', 'image/jpg', 'image/png', 'application/pdf'],
       localFileList: [], // 本地上传文件
       uploadList: [], // 传输给后端的文件
-      isChecked:false
+      isChecked: false
     }
   },
 
@@ -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) {
@@ -146,7 +173,7 @@ export default {
         // let url = 'https://p8.itc.cn/q_70/images03/20210420/b5e2b7a15457406bb48135828b8fea03.jpeg'
         this.$loading(true)
         const invoiceScanApi = this.type == '01' ? invoiceScanApi01 : this.type == '02' ? invoiceScanApi02 : this.type == '03' ? invoiceScanApi03 : this.type == '04' ? invoiceScanApi04 : invoiceScanApi05;
-        invoiceScanApi({ url,type:this.type }).then((res) => {
+        invoiceScanApi({ url, type: this.type }).then((res) => {
           // this.scanRes = res.data
           this.$emit('scanRes', res)
           this.$loading(false)
@@ -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,