您现在的位置是：网站首页> 编程资料编程资料

vue+elementUI实现多文件上传与预览功能实战记录(word/PDF/图片/docx/doc/xlxs/txt)_vue.js_

2023-05-24 275人已围观

简介 vue+elementUI实现多文件上传与预览功能实战记录(word/PDF/图片/docx/doc/xlxs/txt)_vue.js_

需求

最近在做vue2.0+element UI的项目中遇到了一个需求：需求是多个文件上传的同时实现文件的在线预览功能。需求图如下：

看到这个需求的时候，小栗脑袋一炸。并不知道该如何下手，之前的实践项目中也并没有遇到相似的功能。因此也废了一番功夫想要实现这样一个功能。

首先先查看elemnt UI的官方文档发现，大部分的实现文件上传效果的功能，即使可以提供预览的功能，但是不能指定该功能的样式和内容有一定的局限性

然后小栗查找“多文件上传预览、PDF预览、word预览等关键词”，发现大部分的大佬的方法都是实现了图片预览，并没有实现多文件上传（也可能是因为我并没有找到相关的功能）。

因此小栗决定自己封装这个功能，并希望有朋友能在这个的基础上进行调整优化。期待你们的参与哦～～

话不多说，上才艺

实现需求

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

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

代码如下：

HTML部分

//on-preview="Previewf"是必须的也是预览的关键 上传文件

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 */ 将文件拖到此处，或点击上传
 支持扩展名：.rar .zip .doc .docx .xls .txt .pdf .jpg .png .jpeg，最多上传5个文件，每个大小不超过50Mb 
 {{ noHidden ? "收起" : "更多" }}

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组件内容

效果图

以上就可以实现实现多文件上传+预览（word/PDF/图片/docx/doc/xlxs/txt）啦，希望这样的实现方式也对你有帮助哦

追加关于问的比较多的问题回复

1、imgsrc路径

imgsrc: { "rar": require('@/assets/material/zip.png'), } 这个位置会报错

这里报错是因为此处的内容是静态资源，他是我们预览图片的一些细节，长成如下图所示：

你本地应该也需要配置这样一个文件夹的路径就可以啦。

2、显示原本elementui的那个上传样式

重点关注el- upload的代码 :show-file-list="false" //关闭原来的上传样式 ref="contentWrap //这个是通过父子组件传值将子组件的页面

<

上一篇：ECMAScript 6数组的扩展实例详解_JavaScript_

下一篇：创建图片对比slider滑块示例详解_JavaScript_

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网