要实现以上效果：
import { Field } from ‘vant‘;
Vue.use(Field);
<van-field name="uploader" label="文件上传">
<template #input>
<van-uploader :max-count="1" :after-read="afterRead" v-model="uploader" accept=".pdf">
<van-button icon="plus" type="primary" color="#00A2FF">上传文件</van-button> <!--蓝色的自定义的样式-->
</van-uploader>
</template>
</van-field>
在data里面：
uploader:[],
fileId ："",
methods 方面里面：
afterRead(file) {
/*this.uploader[0].content*/ //base64 的pdf 二进制码
this.uploadLibraryFile(this.uploader[0].content);
},
/*上传pdf的接口*/
uploadLibraryFile(pdfBase64){
api
.uploadLibraryFile({
file: pdfBase64,
type: "pdf",
})
.then((res) => {
if (res.code == 200) {
this.overlayShow = false ; /*遮道层消失*/
this.= res.data.fileId; /*返回的fileId*/
} else {
Toast.fail(res.message);
this.overlayShow = false ; ///*遮道层消失*/
}
});
},
addFile(){
if (this.pdfNodes.length == 0){
if (this.fileName == "" || this.fileName.match(/^\s*$/) ){
Toast.fail(‘文件名称不能为空‘);
return;
};
if (this.uploader.length == 0 ){
Toast.fail(‘请上传文件‘);
return;
};
}
this.overlayShow = true ; /*开始出现遮道层*/
/*接口已经改好，无需调整*/
api
.addMenu({
fileId: this.fileId ,
menuName: this.fileName,
parentMenuId: this.thirdMenuId, //父级ID
/* type: this.type //父级ID*/
})
.then((res) => {
if (res.code == 200) {
this.overlayShow = false ; /*遮道层消失*/
Toast.success(‘新增成功‘);
this.$router.push({
name: ‘productDescriptionForthClass‘,
params: {
type: this.type,
firstMenu: this.firstMenu,
secondMenuId: this.secondMenuId,
thirdMenuId: this.thirdMenuId,
thirdMName: this.thirdMName,
}
})
} else {
Toast.fail(res.message);
this.overlayShow = false ; ///*遮道层消失*/
}
});
},
//pdf 实现预览的效果：
通过pdf,js 实现
第一步：下载 http://mozilla.github.io/pdf.js/getting_started/#download
下载稳定版：
把下载文件放到static静态资源下面：build & web 两个文件夹
<template>
<div class="wrap">
<iframe :src="pSrc" width="100%" height="100%"></iframe>
</div>
</template>
data:
pSrc:‘‘,
mounted () {
this.loadPDF();
//监听返回键
},
methods:
loadPDF () {
//baseurl ：pdf存放的文件路径，可以是本地的，也可以是远程，这个是远程的，亲测可以用
/* let baseurl = ‘https://assettest.hzncc.cn/HncWeb/group1/M00/19/F6/CgEUdV8Nm5KALOf0AAM_XOvHKIY664.pdf‘;*/
//ie有缓存加个随机数解决 + ‘?r=‘ + new Date()
let pSrc = this.baseurl + ‘?r=‘ + new Date();
this.pSrc = ‘../../../static/web/viewer.html?file=‘ + encodeURIComponent(pSrc) + ‘.pdf‘;
},
<style scoped>
.wrap{
position: fixed;
top: 46px; /*由于有navbar 所以设置top 的高度，高度很重要*/
left: 0;
width: 100%;
bottom: 0;
}
</style>
pdf 上传和预览