devbox
不正经
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Vue 封装el-upload通用组件， 实现pdf、img混排，支持预览_el-upload上传pdf可预览

作者：不正经 | 2024-03-11 12:01:35

赞

踩

el-upload上传pdf可预览
  1. 使用vue-pdf加载pdf文件 
    npm install --save vue-pdf

  2. el-upload设置上传文件格式，自定义排版，通过过slot实现
     

    1.   <el-upload
    2.         ref="elUpload"
    3.         :action="baseUrl"
    4.         list-type="picture-card"
    5.         :limit="limit"
    6.         :class="{ hide: disabled }"
    7.         :disabled="disabled"
    8.         :before-upload="beforeAvatarUpload"
    9.         accept=".jpg, .png, .gif, .jpeg, .pdf"
    10.         :file-list="fileList"
    11.       >
    12.         <i class="el-icon-plus"></i>
    13.         <div
    14.           slot="file"
    15.           slot-scope="{ file }"
    16.           v-loading="file.status == 'uploading'"
    17.           style="height: 100%"
    18.         >
    19.           <pdf
    20.             v-if="file.name.endsWith('.pdf')"
    21.             :src="file.url"
    22.             :page="1"
    23.           ></pdf>
    24.  
    25.           <img
    26.             v-else
    27.             class="el-upload-list__item-thumbnail"
    28.             style="object-fit: cover"
    29.             :src="file.url"
    30.             alt=""
    31.           />
    32.  
    33.           <spa class="el-upload-list__item-actions">
    34.             <span
    35.               class="el-upload-list__item-preview"
    36.               @click="handlePictureCardPreview(file)"
    37.             >
    38.               <i class="el-icon-zoom-in"></i>
    39.             </span>
    40.  
    41.             <span
    42.               v-if="!disabled"
    43.               class="el-upload-list__item-delete"
    44.               @click="handleRemove(file)"
    45.             >
    46.               <i class="el-icon-delete"></i>
    47.             </span>
    48.           </spa>
    49.         </div>
    50.       </el-upload>

  3. pdf预览，通过el-dialog 实现
     

    1.    <el-dialog
    2.       title="查看PDF"
    3.       :visible.sync="dialogVisible"
    4.       width="80%"
    5.       :modal="false"
    6.     >
    7.       <pdf
    8.         ref="pdf"
    9.         v-for="i in pdfPageNumber"
    10.         :key="i"
    11.         :src="pdfSrc"
    12.         :page="i"
    13.       ></pdf>
    14.     </el-dialog>

  4. 图片预览，为了和项目图片预览保持统一，这里使用el-image自带的图片预览，不过需要自己手动调用
     

    1.    //设置一个1像素的，为了使用预览功能
    2.     <el-image
    3.         ref="elImage"
    4.         :src="previewImageUrl"
    5.         style="width: 1px; height: 1px"
    6.         :preview-src-list="[previewImageUrl]"
    7.       ></el-image>
    8.  
    9.  
    10.    //获取elImage元素，手动调用预览
    11.    let image = this.$refs.elImage;
    12.    image.showViewer = true;

  5. 效果图

  6. 完整代码

     

  1. <template>
  2.   <div>
  3.     <div style="display: flex; flex-direction: column">
  4.       <el-upload
  5.         ref="elUpload"
  6.         :action="baseUrl"
  7.         list-type="picture-card"
  8.         :limit="limit"
  9.         :class="{ hide: disabled }"
  10.         :disabled="disabled"
  11.         :before-upload="beforeAvatarUpload"
  12.         accept=".jpg, .png, .gif, .jpeg, .pdf"
  13.         :file-list="fileList"
  14.       >
  15.         <i class="el-icon-plus"></i>
  16.         <div
  17.           slot="file"
  18.           slot-scope="{ file }"
  19.           v-loading="file.status == 'uploading'"
  20.           style="height: 100%"
  21.         >
  22.           <pdf
  23.             v-if="file.name.endsWith('.pdf')"
  24.             :src="file.url"
  25.             :page="1"
  26.           ></pdf>
  27.  
  28.           <img
  29.             v-else
  30.             class="el-upload-list__item-thumbnail"
  31.             style="object-fit: cover"
  32.             :src="file.url"
  33.             alt=""
  34.           />
  35.  
  36.           <spa class="el-upload-list__item-actions">
  37.             <span
  38.               class="el-upload-list__item-preview"
  39.               @click="handlePictureCardPreview(file)"
  40.             >
  41.               <i class="el-icon-zoom-in"></i>
  42.             </span>
  43.  
  44.             <span
  45.               v-if="!disabled"
  46.               class="el-upload-list__item-delete"
  47.               @click="handleRemove(file)"
  48.             >
  49.               <i class="el-icon-delete"></i>
  50.             </span>
  51.           </spa>
  52.         </div>
  53.       </el-upload>
  54.  
  55.       <p v-if="!disabled">
  56.         支持jpg、gif、png、pdf格式，最多上传10个,单个文件不超过20M。
  57.       </p>
  58.       <el-image
  59.         ref="elImage"
  60.         :src="previewImageUrl"
  61.         style="width: 1px; height: 1px"
  62.         :preview-src-list="[previewImageUrl]"
  63.       ></el-image>
  64.     </div>
  65.     <el-image
  66.       ref="elImage"
  67.       :src="previewImageUrl"
  68.       style="width: 1px; height: 1px"
  69.       :preview-src-list="[previewImageUrl]"
  70.     ></el-image>
  71.  
  72.     <el-dialog
  73.       title="查看PDF"
  74.       :visible.sync="dialogVisible"
  75.       width="80%"
  76.       :modal="false"
  77.     >
  78.       <pdf
  79.         ref="pdf"
  80.         v-for="i in pdfPageNumber"
  81.         :key="i"
  82.         :src="pdfSrc"
  83.         :page="i"
  84.       ></pdf>
  85.     </el-dialog>
  86.   </div>
  87. </template>
  88.  
  89. <script>
  90. import pdf from "vue-pdf";
  91. export default {
  92.   name: "",
  93.   components: {
  94.     pdf,
  95.   },
  96.   props: {
  97.     ///当前列表选中条目
  98.     selectRow: {
  99.       type: Object,
  100.       default: {},
  101.     },
  102.     //需要回显的文件
  103.     fileList: {
  104.       type: Array,
  105.       default: [],
  106.     },
  107.     //最大上传数
  108.     limit: {
  109.       type: Number,
  110.       default: 10,
  111.     },
  112.     ///是否禁用上传，只支持放大预览
  113.     disabled: {
  114.       type: Boolean,
  115.       default: false,
  116.     },
  117.   },
  118.   data() {
  119.     return {
  120.       pdfPageNumber: 0,///pdf最页数
  121.       pdfSrc: "",///pdf地址
  122.       loadingBtn: false,
  123.       dialogVisible: false,
  124.       previewImageUrl: "",///预览图片都中
  125.       baseUrl: "",
  126.     };
  127.   },
  128.  
  129.  
  130.   mounted() {
  131.     this.getBaseUrl();
  132.   },
  133.  
  134.   methods: {
  135.     ///获取上传文件地址
  136.     getBaseUrl() {
  137.       if (process.env.NODE_ENV === "development") {
  138.         this.baseUrl =
  139.           "java/" +
  140.           this.$store.state.user.urlConfig["java"] +
  141.           "api/v1/app/aliyun/uploadFile";
  142.       } else {
  143.         this.baseUrl =
  144.           this.$store.state.user.urlConfig["java"] +
  145.           "api/v1/app/aliyun/uploadFile";
  146.       }
  147.     },
  148.     ///判断文件大小
  149.     beforeAvatarUpload(file) {
  150.       const isLt20M = file.size / 1024 / 1024 < 20;
  151.       if (!isLt20M) {
  152.         this.$message.error("上传头像图片大小不能超过 20MB!");
  153.       }
  154.       return isLt20M;
  155.     },
  156.     ///点击删除
  157.     handleRemove(file) {
  158.       let uploadFiles = this.$refs.elUpload.uploadFiles;
  159.       let index = uploadFiles.findIndex((item) => {
  160.         return item == file;
  161.       });
  162.       uploadFiles.splice(index, 1);
  163.     },
  164.     ///预览
  165.     handlePictureCardPreview(file) {
  166.       if (file.name.endsWith(".pdf")) {
  167.         if (file.response) {
  168.           this.pdfSrc = file.response.data;
  169.         } else {
  170.           this.pdfSrc = file.name;
  171.         }
  172.         this.getPDFnums(this.pdfSrc);
  173.       } else {
  174.         let image = this.$refs.elImage;
  175.         if (file.response) {
  176.           this.previewImageUrl = file.response.data;
  177.         } else {
  178.           this.previewImageUrl = file.name;
  179.         }
  180.         image.showViewer = true;
  181.       }
  182.     },
  183.     //计算pdf页码总数
  184.     getPDFnums(url) {
  185.       let loadURL = pdf.createLoadingTask({
  186.         url: url, //你的pdf地址
  187.       });
  188.       loadURL.promise.then((pdf) => {
  189.         this.pdfPageNumber = pdf.numPages;
  190.         this.dialogVisible = true;
  191.       });
  192.     },
  193.  
  194.     getFileUrls() {
  195.       let fileNames = "";
  196.       const uploadFiles = this.$refs.elUpload.uploadFiles;
  197.       debugger
  198.       let uploading = uploadFiles.some((item) => {
  199.         return item.status == "uploading";
  200.       });
  201.       if (uploading) {
  202.         this.$message.warning("文件上传中，请稍后再试！");
  203.         return false;
  204.       }
  205.       uploadFiles.forEach((item) => {
  206.         const response = item.response;
  207.         if (response) {
  208.           if (response.code == 0) {
  209.             fileNames += response.data + ",";
  210.           }
  211.         } else {
  212.           fileNames += item.name + ",";
  213.         }
  214.       });
  215.       if (fileNames.endsWith(",")) {
  216.         fileNames = fileNames.replace(/,$/gi, "");
  217.       }
  218.       return fileNames;
  219.     },
  220.   },
  221. };
  222. </script>
  223. <style lang='less' scoped>
  224.  
  225. /deep/ .hide .el-upload--picture-card {///deep 穿透隐藏上传图片入口
  226.   display: none;
  227. }
  228. </style>

PS:pdf有些发票信息显示不全，一些字体显示不出来，解决办法如下

  1.     //url 是当前pdf的链接地址
  2.     getPdfUrl(url) {
  3.       let src = pdf.createLoadingTask({
  4.         url: url,
  5.         //引入pdf.js字体，templ
  6.         cMapUrl: "https://cdn.jsdelivr.net/npm/pdfjs-dist@2.5.207/cmaps/",
  7.         cMapPacked: true,
  8.       });
  9.       return src;
  10.     },

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/不正经/article/detail/218942?site
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号