需求：上传pdf文件，并点击可以打开预览。使用input的file功能即可完成，预览只需要跳转到pdf的url地址即可。还可以配合vue-pdf直接预览，点击看这篇。
以下代码可直接复制使用！！！有效的可以点赞收藏支持下！
<template><div class="content"><input type="file" class="box-orc-input" @change="uploadPdf($event)" /><span class="s2" v-if="pdfName" @click="gotoPdf(pdfUrl)">{{pdfName}} <span @click.stop.prevent="delPdf()">❌</span></span></div></template><script>function ie9 () {if (navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.split(";")[1].replace(/[ ]/g, "") == "MSIE6.0" || navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.split(";")[1].replace(/[ ]/g, "") == "MSIE7.0" || navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.split(";")[1].replace(/[ ]/g, "") == "MSIE8.0" || navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.split(";")[1].replace(/[ ]/g, "") == "MSIE9.0") {return true} else {return false}}export default {data () {return {pdfName: '',pdfUrl: '',}},methods: {// 上传pdfuploadPdf (event) {console.log(event)if (event.target.files[0].type != 'application/pdf') {return this.$message.warning('请选择上传pdf文件')}if (ie9()) {this.$message.warning('iE9及以下版本IE浏览器暂不支持该功能，请升级IE浏览器或者用其他浏览器操作。')retrun}//iE9及以下版本IE浏览器暂不支持该功能，请升级IE浏览器或者用其他浏览器操作。let inputDOM = event.targetlet _this = thisvar reader = new FileReader()reader.readAsDataURL(inputDOM.files[0])reader.onload = function (e) {_this.getPdfUrl(event.target.files[0])_this.pdfName = event.target.files[0].nameinputDOM.value = null //将input置空 否则上传相同文件无反应 (不过置空后28行的打印 就看不到 event.target.files 文件数据（可以先注释此行看下数据--就是pdf文件） )}},//通过读取pdf得到urlgetPdfUrl (file) {let url = URL.createObjectURL(file) //将文件转化成urlthis.pdfUrl = url //赋值给urlconsole.log(url) // blob:http://localhost:8080/f2049a9d-31a6-4bd9-8a94-23dee457218freturn url},// 打开pdfgotoPdf (pdfUrl) {// window.location.href = pdfUrlwindow.open(pdfUrl)},// 删除pdfdelPdf () {this.pdfName = ''this.pdfUrl = ''}}}</script><style></style>
