<!--
|
* @Author: zh
|
* @Date: 2022-01-05 18:44:53
|
* @LastEditors: zxq
|
* @LastEditTime: 2022-04-08 15:01:23
|
* @Description: Description
|
* @FilePath: \qyp-plat\src\components\uploadPdf.vue
|
-->
|
<template>
|
<div>
|
<el-upload action="#" :http-request="uploadFileData" :before-upload="beforeAvatarUpload" :file-list="fileList" :on-preview="openFile" :on-remove="removeFile">
|
<el-button size="small" type="primary">点击上传</el-button>
|
<div slot="tip" class="el-upload__tip">只能上传pdf文件</div>
|
</el-upload>
|
<el-dialog title="查看批文" :visible.sync="imgVisible" class='dialogImageUrlbox' >
|
<el-button-group>
|
<el-button type="primary" icon="el-icon-arrow-left" size="mini" @click="prePage">上一页</el-button>
|
<el-button type="primary" size="mini" @click="nextPage">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
|
</el-button-group>
|
<div style="marginTop: 10px; color: #409EFF">{{ pageNum }} / {{ pageTotalNum }}</div>
|
<pdf :page="pageNum" :src="url" @progress="loadedRatio = $event" @num-pages="pageTotalNum=$event"></pdf>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import pdf from 'vue-pdf'
|
import { uploadFile } from "@/api/user";
|
import { getBase64 } from "@/utils/validate";
|
export default {
|
components: {
|
pdf,
|
},
|
props: {
|
defaultList: {
|
type: Array,
|
default: () => {
|
return []
|
}
|
},
|
// isPrview:{
|
// type: false,
|
// default: () => {
|
// return []
|
// }
|
// }
|
},
|
data() {
|
return {
|
url:'',
|
fileList: [],
|
imgVisible: false,
|
dialogImageUrl: '',
|
uploadFileForm: {
|
suffix: "",
|
base64Data: ""
|
},
|
pageNum: 1,
|
pageTotalNum: 1, //总页数
|
loadedRatio: 0, // 当前页面的加载进度，范围是0-1 ，等于1的时候代表当前页已经完全加载完成了
|
};
|
},
|
watch: {
|
defaultList: {
|
handler: function (val) {
|
this.fileList = val;
|
},
|
deep: true
|
}
|
},
|
methods: {
|
// 上一页
|
prePage() {
|
let page = this.pageNum
|
page = page > 1 ? page - 1 : this.pageTotalNum
|
this.pageNum = page
|
},
|
// 下一页
|
nextPage() {
|
let page = this.pageNum
|
page = page < this.pageTotalNum ? page + 1 : 1
|
this.pageNum = page
|
},
|
beforeAvatarUpload(file) {
|
if (file.type != 'application/pdf') {
|
this.$message.error("上传文件格式不对!");
|
return false;
|
}
|
},
|
uploadFileData(file) {
|
const fileName = file.file.name
|
this.uploadFileForm.suffix = fileName.substr(fileName.lastIndexOf(".") + 1, fileName.length)
|
getBase64(file.file).then(resBase64 => {
|
this.uploadFileForm.base64Data = resBase64.split(',')[1]
|
//直接拿到base64信息
|
uploadFile(this.uploadFileForm).then(res => {
|
this.fileList.push({
|
filePath: res.body.fileUrl,
|
fileName: fileName,
|
name:fileName,
|
uid: file.file.uid,
|
url: res.body.fileUrl,
|
fileId:res.body.fileId
|
});
|
this.$emit('sendList', this.fileList);
|
})
|
})
|
},
|
removeFile(file) {
|
const index = this.fileList.findIndex(item => {
|
return item.uid == file.uid;
|
});
|
this.fileList.splice(index, 1);
|
this.$emit('sendList', this.fileList);
|
},
|
openFile(file) {
|
const itemArr = this.fileList.find(item => {
|
return item.uid == file.uid;
|
});
|
// const pdfUrl = process.env.NODE_ENV === 'development' ? 'https://t.finlean.com' : window.location.origin
|
this.url = itemArr.filePath
|
this.imgVisible=true
|
},
|
},
|
created() {
|
|
},
|
mounted() {
|
|
},
|
};
|
</script>
|
|
<style scoped lang="scss">
|
</style>
|
