优化文件上传pdf显示

pull/1/head
123456 8 months ago
parent 20c52ebd08
commit 599578b531

@ -2,7 +2,11 @@
<template> <template>
<div class="upload-box"> <div class="upload-box">
<div class="box-lf"> <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">支持pngpdfjpg格式上传</div> <div class="up-tt">支持pngpdfjpg格式上传</div>
</div> </div>
<div class="box-rt"> <div class="box-rt">
@ -50,13 +54,18 @@ export default {
// isChecked: Boolean, // isChecked: Boolean,
disabled: Boolean, disabled: Boolean,
scanRes: Object, scanRes: Object,
type:String type: String
}, },
watch: { watch: {
fileList: { fileList: {
handler(list) { handler(list) {
// this.localFileList = list // this.localFileList = 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 this.uploadList = list
}, },
deep: true, deep: true,
@ -69,7 +78,7 @@ export default {
imgTypeArr: ['image/jpeg', 'image/jpg', 'image/png', 'application/pdf'], imgTypeArr: ['image/jpeg', 'image/jpg', 'image/png', 'application/pdf'],
localFileList: [], // localFileList: [], //
uploadList: [], // uploadList: [], //
isChecked:false isChecked: false
} }
}, },
@ -79,6 +88,24 @@ export default {
methods: { 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) { handleClickUpload(file) {
const { url } = file const { url } = file
if (url) { if (url) {
@ -146,7 +173,7 @@ export default {
// let url = 'https://p8.itc.cn/q_70/images03/20210420/b5e2b7a15457406bb48135828b8fea03.jpeg' // let url = 'https://p8.itc.cn/q_70/images03/20210420/b5e2b7a15457406bb48135828b8fea03.jpeg'
this.$loading(true) this.$loading(true)
const invoiceScanApi = this.type == '01' ? invoiceScanApi01 : this.type == '02' ? invoiceScanApi02 : this.type == '03' ? invoiceScanApi03 : this.type == '04' ? invoiceScanApi04 : invoiceScanApi05; 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.scanRes = res.data
this.$emit('scanRes', res) this.$emit('scanRes', res)
this.$loading(false) this.$loading(false)
@ -203,6 +230,15 @@ export default {
</script> </script>
<style lang='scss' scoped> <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 { .upload-box {
width: 100%; width: 100%;
display: flex; display: flex;

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

Loading…
Cancel
Save