前端上传el-upload、原生input本地文件pdf格式(纯前端预览本地文件不走后端接口）

前端实现本地文件上传与预览（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%" />

效果图