Element文件上传 pdf 及预览

目标：vue+element 实现上传图片及pdf 和预览功能

技术：vue、element、vue-pdf

安装及引入：

//安装
npm install  --save vue-pdf//引入
import pdf from 'vue-pdf'
export default {components: { pdf }
}

页面代码：

<template><div><el-upload accept=".pdf, .jpg, .jpeg, .png"action="https://jsonplaceholder.typicode.com/posts/" :file-list="fileArr":show-file-list="false" :auto-upload="false" :before-upload="beforeUpload":on-success="upSuccess" :on-error="upError" :on-change="imgPreview"><el-input v-model="form.position" class="upload-input" /><el-button size="small" type="primary" class="upload-btn"><span class="iconfont icon-shangchuan" />上传文件</el-button></el-upload></div>
</template><script>
import pdf from "vue-pdf";
export default {components: { pdf },data() {return {pdfUrl: "",numPages: [],fileArr: [],upLoadImgUrl: ""}},methods: {beforeUpload(file) {const fileSuffix = file.name.substring(file.name.lastIndexOf(".") + 1);const whiteList = ["pdf", "jpg", "jpeg", "png"];if (whiteList.indexOf(fileSuffix) === -1) {this.$msg("上传文件只能是 pdf、jpg、jpeg、png", "error");return false;}},imgPreview(file) {this.fileArr = [];this.fileArr.push(file);this.form.position = "";console.log(file);this.form.position = file.name;let fileName = file.name;let regex = /(.jpg|.jpeg|.gif|.png|.pdf)$/;if (regex.test(fileName.toLowerCase())) {this.upLoadImgUrl = URL.createObjectURL(file.raw); // 获取URLthis.pdfUrl = this.getPdfUrl(file);console.log(this.upLoadImgUrl);} else {this.$message.error("请选择图片文件");}},// 上传成功upSuccess(res) {this.$message({message: "上传成功",type: "success",});},// 上传失败upError(e) {this.$message({message: "上传失败",type: "error",});},//处理pdfgetPdfUrl(file) {console.log(file);let url = window.URL.createObjectURL(file.raw); //将文件转化成url//加载pdflet loadingTask = pdf.createLoadingTask(url);loadingTask.promise.then((pdf) => {this.numPages = pdf.numPages;console.log(this.numPages);}).catch((err) => {console.error("pdf 加载失败", err);});return url;}}
}
</script>

效果：支持PDF多页展示

Element文件上传 pdf 及预览相关推荐

struts上传word和excel文件到oracle,Struts文件上传,下载,重传,预览
[Struts2]☆★之文件上传,下载,重传,预览今日群里一兄弟问我能否给一份struts文件上传下载的例子,因为自己项目比较紧所以想在网上找些源码给他,但是纵观全网,写的都不是太全,这让新手使用 ...
2016/4/19 ①单个文件上传 ②上传图片后预览图片
1,f1.php <!DOCTYPE html> <htmllang="en"> <head><metacharset="UTF ...
用openoffice+jodconverter+webuploader+pdf.js实现文件上传、在线预览功能
一.背景最近公司一个项目要实现一个文件上传以及多文档在线预览的功能,之前一直做无线工具开发的,没有涉及到这些东西.另外项目组缺java开发人员,而且自己也只是一个半吊子前端加小半吊子java开发人员 ...
php文件上传及头像预览
php文件上传原理是通过form表单的enctype="multipart/form-data"属性将文件临时放到wamp文件夹中的tmp目录下,再通过后台php 程序将文件保存在 ...
Java写file文件上传，在线预览思路
需要考虑的 1.存储路径区根据时间进行区分,例如根据年月份存放不同的文件目录/20220303 2.上传的文件为避免文件名相同,文件名存数据库,存储存放的文件名为UUID+后缀(如果不需要在线预览,则 ...
php上传头像的代码,php实现文件上传及头像预览功能
php文件上传原理是通过form表单的enctype="multipart/form-data"属性将文件临时放到wamp文件夹中的tmp目录下,再通过后台php程序将文件保存在体 ...
SpringBoot实现PPT格式文件上传并在线预览
1.需要引入依赖 <dependency><groupId>com.itextpdf</groupId><artifactId>itextpdf< ...
vue3 el-upload 上传附件及预览限制只能上传一个图片或者pdf格式的文件
vue3 el-upload 上传附件及预览限制只能上传一个图片或者pdf格式的文件效果如图直接看代码吧 template部分 <div class="file-upload&q ...
js上传视频，预览视频
js上传视频,预览视频 <videostyle="width:300px; height:auto;object-fit: fill;"playsinlinecontrols ...

Element文件上传 pdf 及预览

Element文件上传 pdf 及预览相关推荐

最新文章

热门文章