vue实战--vue+elementUI实现多文件上传+预览（word PDF 图片 docx doc xlxs txt）_elementui pdf 上传后预览

2401_84435739

于 2024-04-29 14:16:30 发布

阅读量455

点赞数 5

分类专栏：程序员文章标签： vue.js elementui word

本文链接：https://blog.csdn.net/2401_84435739/article/details/138311581

版权

程序员专栏收录该内容

166 篇文章 0 订阅

订阅专栏

看到这个需求的时候，小栗脑袋一炸。并不知道该如何下手，之前的实践项目中也并没有遇到相似的功能。因此也废了一番功夫想要实现这样一个功能。
    首先先查看elemnt UI的官方文档发现，大部分的实现文件上传效果的功能，即使可以提供预览的功能，但是不能指定该功能的样式和内容有一定的局限性
    然后小栗查找“多文件上传预览、PDF预览、word预览等关键词”，发现大部分的大佬的方法都是实现了图片预览，并没有实现多文件上传（也可能是因为我并没有找到相关的功能）。
    因此小栗决定自己封装这个功能，并希望有朋友能在这个的基础上进行调整优化。期待你们的参与哦～～
    话不多说，上才艺

实现需求

1、利用on-preview+window.open()实现简易版预览效果

查看element UI文档后发现el-upload里面有一个Attribute叫on-preview（点击文件列表中已上传的文件时的钩子）是专门用来做文件预览的。点击文件就可以出发该函数。再结合window.open()方法可以直接完成一个新开窗口页的查看文件
代码如下：

HTML部分

//on-preview="Previewf"是必须的也是预览的关键
 <el-upload
 class="upload-demo"
 :action="uploadUrl"
 :on-success="handlePreview"
 :on-remove="handleRemove"
 :before-upload="beforeUpload"
 :on-preview="Previewf"
 multiple
 :limit="5"
 :on-exceed="handleExceed"
 :file-list="file-list"
 :accept="accepts"
 >
           <el-button icon="el-icon-upload2" @click="uploadFileClick($event)"
 >上传文件</el-button
 >
         </el-upload>

methods部分

Previewf(file) {
      console.log(file);
      // window.open(file.response)
      if (file) {
        const addTypeArray = file.name.split(".");
        const addType = addTypeArray[addTypeArray.length - 1];
        console.log(addType);
        if (addType === "pdf") {
          let routeData = this.$router.resolve({
            path: "/insurancePdf",
            query: { url: file.response, showBack: false },
          });
          window.open(routeData.href, "\_blank");
        }
        //".rar, .zip, .doc, .docx, .xls, .txt, .pdf, .jpg, .png, .jpeg,"
        else if (addType === "doc" || addType === "docx" || addType === "xls") {
          window.open(
            "http://view.officeapps.live.com/op/view.aspx?src=" + file.response
          );
        } else if (addType === "txt") {
          window.open(file.response);
        } else if (["png", "jpg", "jpeg"].includes(addType)) {
          window.open(file.response);
        } else if (addType === "rar" || addType === "zip") {
          this.$message({
            message: "该文件类型暂不支持预览",
            type: "warning",
          });
           return false;
        }
      }
    },

功能预览

点击蓝色的文件部分就可以出现新开页面，这个简易的利用element UI就完成了这个功能啦～有没有觉得还是不那么难呢？

2、封装组件实现更完整的上传完成、预览功能

上述的功能可以完成预览，但与我们的需求有一部分的出入，不能够完全满足我的业务需求，因此在element UI的基础上，我进行了组件封装，以求完成以下功能：
在这里插入图片描述
话不多说，还是上代码：

HTML部分

/*
重点关注的代码：
	:show-file-list="false"
	ref="contentWrap
*/
 <el-upload
 class="upload-demo"
 ref="uploadCom"
 :show-file-list="false"
 :action="uploadUrl"
 :on-success="onSuccess"
 :on-remove="handleRemove"
 :before-upload="beforeUpload"
 multiple
 :limit="5"
 :on-exceed="handleExceed"
 :file-list="file-list"
 :accept="accepts"
 >
            <el-button icon="el-icon-upload2" @click="uploadFileClick($event)"
 >将文件拖到此处，或<em>点击上传</em></el-button
 >
            <div slot="tip" class="el-upload\_\_tip">
              支持扩展名：.rar .zip .doc .docx .xls .txt .pdf .jpg .png .jpeg，最多上传5个文件，每个大小不超过50Mb
            </div>
          </el-upload>
          <div class="flex mt20" v-if="file-list.length > 0">
                <div
 class="items-wrap"
 ref="contentWrap"
 :style="wrapHeight <= 70 ? 'height: auto' : `height: 60px;`"
 :class="{ noHidden: noHidden }"
 >
                  <uploadfile-item
 v-for="(item, index) in file-list"
 :key="index"
 :file="item"
 @cancel="cancelFile"
 :showDel="true"
 class="mr20"
 ></uploadfile-item>
                </div>
                <div
 class="on-off"
 v-if="wrapHeight > 70"
 @click="noHidden = !noHidden"
 >
                  {{ noHidden ? "收起" : "更多" }}
                </div>
              </div>

methods部分

import UploadfileItem from "";
export default {
  components: {
    UploadfileItem,
  },
  data() {
    return {
      noHidden: true,
      wrapHeight: 0,
      delDialogitem: 0,
      imgLoad: false,
      centerDialogVisible: false,
     file-list：[],
      },
    };
  },
  methods: {
    cancelFile(file) {
      console.log(file);
    },

    // 上传文件只能添加五条
    uploadFileClick(event) {
      if (this.formLabelAlign.annex.length === 5) {
        this.$message({
          type: "warning",
          message: "最多只可以添加五条",
        });
        event.stopPropagation();
        return false;
      }
    },
    //
    onSuccess(response, file, annex) {
      if (!response) {
        this.$message.error("文件上传失败");
      } else {
        this.imgLoad = false;
        this.$message({
          message: "上传成功!",
          type: "success",
        });
      }
    },
   
    beforeUpload(file) {
     console.log(file);
    },
    handleExceed(files, ) {
 		console.log(file);
  },
};

UploadfileItem组件内容

<template>
  <div class="file-style-box">
    <div class='upload-file-item'>
      <img :src="imgsrc[getEnd(file.fileName)]" alt="">
      <div>
        <p class='file-name'>
          <span class='name'>{{file.fileName}}</span>
          </p>
        <div class='option'>
          <span class='size'>{{file.size | toKB}}kb</span>
          <div>
            <span v-if='showDel && (isPdf(file) || isImg(file))' @click='previewHandler(file.url)' class='preview mr10'>预览</span>
            <a v-if='!showDel' @click='downLoadHandler' class='preview' :href="file.url">下载</a>
            <span v-if='showDel' class='mr10 success'>上传完成</span>
          </div>
        </div>
        <div class='delBtn' v-if='showDel' @click='cancelHanlder(file)'>
          <img src="@/assets/public/tips-err.png" alt="">
        </div>
      </div>
    </div>
    <el-dialog
      title="图片预览"
      width="800px"
      class="imgDlgBox"
      :visible.sync="imgDlgVisible"
      :close-on-click-modal="true"
      :modal="false"
      append-to-body
    >
      <img :src="imgUrl" alt="">
    </el-dialog>
  </div>

</template>

<script>
export default {
  props: {
    file: {
      type: Object,
      default: {}
    },
    showDel: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      imgDlgVisible: false,
      imgUrl: '',
      pdfUrl: '',
      imgsrc: {
      /\*
 \*imgsrc 是关于内部静态图片的显示的路径，需要自己设置
 \*示例"xls": require('@/assets/image/xls.png'),
 xis的文件所需要加载的路径是；assets文件下的image文件夹下的xls.png
 \*/
        "rar": require('@'),
        "zip": require('@'),
        "pdf": require('@'),
        "jpg": require('@'),
        "jpeg": require('@'),
        "png": require('@'),
        "doc": require('@'),
        "docx": require('@'),
        "txt": require('@'),
        "xls": require('@/assets/image/xls.png'),
      }
    }
  },
  filters: {
    toKB(val) {
      return (Number(val) / 1024).toFixed(0);
    }
  },
  methods: {
    cancelHanlder(item) {
      this.$emit('cancel', item)
    },


###  最后

总的来说，面试官要是考察思路就会从你实际做过的项目入手，考察你实际编码能力，就会让你在电脑敲代码，看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时，有一个清晰的逻辑思路，清楚知道自己在和面试官说项目说技术时的话就好了

![](https://img-blog.csdnimg.cn/img_convert/49023d79046d5ca3a1a76b634c2e6251.webp?x-oss-process=image/format,png)

![](https://img-blog.csdnimg.cn/img_convert/66cd22d8b06b99b3e769066d51e3d83b.webp?x-oss-process=image/format,png)


  },
  methods: {
    cancelHanlder(item) {
      this.$emit('cancel', item)
    },


###  最后

总的来说，面试官要是考察思路就会从你实际做过的项目入手，考察你实际编码能力，就会让你在电脑敲代码，看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时，有一个清晰的逻辑思路，清楚知道自己在和面试官说项目说技术时的话就好了

[外链图片转存中...(img-0q6viEs6-1714371379280)]

[外链图片转存中...(img-tp2yUiqM-1714371379281)]


**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

2401_84435739

关注

5
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
vue实战--vue+elementUI实现多文件上传+预览（word PDF 图片 docx doc xlxs txt）_elementui pdf 上传后预览

看到这个需求的时候，小栗脑袋一炸。并不知道该如何下手，之前的实践项目中也并没有遇到相似的功能。因此也废了一番功夫想要实现这样一个功能。首先先查看elemnt UI的官方文档发现，大部分的实现文件上传效果的功能，即使可以提供预览的功能，但是不能指定该功能的样式和内容有一定的局限性然后小栗查找“多文件上传预览、PDF预览、word预览等关键词”，发现大部分的大佬的方法都是实现了图片预览，并没有实现多文件上传（也可能是因为我并没有找到相关的功能）。
复制链接

扫一扫