要實現以上效果：
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>
