前端實現本地文件上傳與預覽（PDF格式展示）不走后端接口

實現步驟

第一步：文件選擇

使用前端原生input上傳本地文件，或者是el-upload組件實現文件選擇功能，核心在于文件渲染處理。（input只不過可以自定義樣式）

 <div v-if="!uploaded" v-loading="loading" class="upload_box"><p @click="openFileSelector()"><img src="@/assets/上傳文件.png" @dragover.prevent @drop.prevent="onDrop" @dragenter.prevent="onDragEnter"@dragleave.prevent="onDragLeave" style="padding-left: 30px" /><input :id="'file' + title" type="file" ref="fileInput" single accept=".pdf" @change="handleFileSelect"style="display: none" /><span class="card_text" for="file">請上傳本地文件</span><span class="card_text" style="font-weight: 400">支持選擇、拖拽上傳PDF</span></p></div>

第二步：文件處理

通過URL.createObjectURL(file)將本地文件轉換為URL進行訪問。

<script>methods: {//點擊上傳的方法openFileSelector() {// console.log('aaaa');const filedox = document.getElementById("file" + this.title);filedox.click();//this.fileInputRef.click();},}//拖拽的方法onDrop(event) {// console.log('ondrop',event)this.isDragging = false;const file1 = event.dataTransfer.files[0];this.uploaded = true;this.loading = falseif (file1 && file1.type === 'application/pdf') {//重點是這里將文件轉換成本地url地址去訪問const blobUrl = URL.createObjectURL(file1);// http://192.168.203.213:8080// console.log('blobUrl',blobUrl)//將url返回給標簽渲染的this.pdfPreview = blobUrl}for (let i = 0; i < files.length; i++) {const file = files[i];if (file.type === "application/pdf" ||file.type === "application/msword" ||file.type ==="application/vnd.openxmlformats-officedocument.wordprocessingml.document") {let transform_type_val;if (files[0].type === "application/pdf") {if (this.routerType == 'word') {transform_type_val = 'pdf2word';file.transform_type = transform_type_val;} else if (this.routerType == 'excel') {transform_type_val = 'risk';file.extract_type = transform_type_val;}// console.log('pdf',file.transform_type)}this.selectedFiles.push(file);}}// this.uploadFiles();this.fileInputRef.value = null;},//input事件 和 拖拽事件一致handleFileSelect(event) {const file1 = event.target.files[0];if (file1 && file1.type === 'application/pdf') {this.uploaded = true;this.loading = falseconst blobUrl = URL.createObjectURL(file1);// http://192.168.203.213:8080// console.log('blobUrl',blobUrl)this.pdfPreview = blobUrl} else {this.$message.error('僅支持pdf格式文件');return;}// console.log('觸犯上傳',files);// for (let i = 0; i < files.length; i++) {// const file = files[i];const file = files[0];const regx = /\.docx$/i;const regc = /\.doc$/i;// console.log('file==',file)if (file.type === "application/pdf" ||file.type === "application/msword" ||file.type === "application/vnd.openxmlformats-officedocument.wordprocessingml.document" ||regx.test(file.name) || regc.test(file.name)) {let transform_type_val;if (files[0].type === "application/pdf") {if (this.routerType == 'word') {transform_type_val = 'pdf2word';file.transform_type = transform_type_val;} else if (this.routerType == 'excel') {transform_type_val = 'risk';file.extract_type = transform_type_val;}// console.log('pdf',file.transform_type)}//this.selectedFiles.push(file);// console.log('this.selectedF/iles',this.selectedFiles)}// }// this.uploadFiles();this.fileInputRef.value = null;},//走接口的方法async uploadFiles() {// console.log('this.selecte/dFiles==',this.selectedFiles)if (this.selectedFiles.length === 0) {this.$message.warning("沒有選擇要上傳的文件");return;}const pattern = /http:\/\/oss:/g;// const pattern = /http:\/\/127.0.0.1:/g;const formData = new FormData();let ConvertPDF = false;// console.log('this.selectedFiles===',this.selectedFiles)this.selectedFiles.forEach((file) => {// if(file.transform_type=='pdf2word'){//   ConvertPDF = true// }formData.append("file", file);// console.log('2656251==',)if (this.routerType == 'word') {formData.append("transform_type", file.transform_type);} else if (this.routerType == 'excel') {formData.append("extract_type", file.extract_type);}});// console.log('didiididi==',)const aiToken = sessionStorage.getItem("aiToken");const xtpToken = sessionStorage.getItem("xtpToken");let apiUrlif (this.routerType == 'word') {apiUrl = '/api/v1/transform/create'// apiUrl = '/api/api/v1/transform/create'} else if (this.routerType == 'excel') {apiUrl = '/api/v1/extract/create'// apiUrl = '/api/api/v1/extract/create'}try {// console.log('上傳')const response = await axios.post(apiUrl,formData,{headers: {"Content-Type": "multipart/form-data",token: aiToken ? aiToken : xtpToken,},});this.loading = truethis.$message.success("文件上傳成功");//這應該獲得上傳好文件的id// console.log('didi==',response.data.data);let id = response.data.data.id;this.$emit('upload', id)if (!id) {this.$message.warning('請上傳文件')return} else {const fileId = idif (this.routerType == 'word') {startTransform({ transform_task_id: fileId }).then((res) => {// console.log('轉換',res);})} else if (this.routerType == 'excel') {startExtract({ extract_task_id: fileId }).then((res) => {// console.log('轉換',res);}).finally(() => {console.log("無論如何都執行")});}if (this.routerType == 'word') {this.$router.push('/wordTable')} else if (this.routerType == 'excel') {this.$router.push('/excelTable')}}let src = '';let errorMsg = '';// 判斷是否轉pdf走轉pdf的接口if (ConvertPDF) {this.timer = setInterval(() => {detai(id).then((res) => {src = res.data.pdf_filepath;errorMsg = res.data.convert_errorif (src) {const a = src.replace(pattern, `http://10.223.33.105:`);this.ispdf = true;this.pdfsrc = a;this.uploaded = true;this.loading = falseclearInterval(this.timer)}if (errorMsg) {this.$message.error("文件轉換失敗" + errorMsg);}})}, 3000);} else {//在這獲取要展示的pdf地址// file_url// console.log('在這獲取要展示的pdf地址',response.data)src = response.data.data.file_url;// const a = src.replace(pattern, `http://192.168.202.231:`);const a = src.replace(pattern, `http://10.223.33.105:`); this.ispdf = true;this.pdfsrc = a;this.uploaded = true;// console.log('pdfsrc==',this.pdfsrc)}} catch (error) {// this.uploaded = true;this.$message.error("文件上傳失敗" + error.message);}},// 重新選擇reselect() {this.$confirm("重新選擇比對結果會被清空？", "提示", {distinguishCancelAndClose: true,confirmButtonText: "確定",cancelButtonText: "取消",}).then(() => {this.uploaded = false;// console.log("dada");this.selectedFiles = []this.pdfsrc = ''this.loading = falsethis.$emit('upload', null)if (this.timer) {clearInterval(this.timer)}}).catch(() => { });},
</script>

第三步：實現本地文件渲染的 <embed> 標簽

渲染機制：利用瀏覽器內置的 PDF 插件進行渲染

<embed v-if="pdfPreview" id="pdfPreview" :src="pdfPreview" width="100%" />

效果圖