Vue实现文件预览和下载功能的前端上传组件

Vue实现文件预览和下载功能的前端上传组件

  • 一、前言
    • 1.准备工作
      • 1.1 创建 Vue 组件
      • 1.2 组件说明
    • 2.注意事项


一、前言

在前端开发中,文件上传和预览是常见的功能需求之一。本文将介绍如何利用 Vue.js 结合 Element UI 的上传组件(el-upload)实现文件上传,并根据文件类型进行预览或下载的功能。

1.准备工作

首先,确保你的项目中已经引入了 Vue.js 和 Element UI。在这个示例中,我们使用了 el-upload 组件来管理文件上传。

1.1 创建 Vue 组件

在 Vue 组件中,我们需要实现以下功能:

  • 文件上传功能
  • 文件预览功能(针对图片类型)
  • 文件下载功能(对于其他类型的文件)
<template><div><el-uploadv-model:file-list="fileList"action="你的上传地址":on-success="handleFileSuccess":on-remove="handleFileRemove":on-error="handleFileError":limit="10":data="fileFormData"name="files":on-preview="openFile"><el-button type="primary">点击上传</el-button></el-upload></div>
</template><script>
import axios from 'axios';export default {data() {return {fileList: [], // 上传文件列表fileFormData: {}, // 额外的上传参数,如果需要的话imageExtensions: ["jpg", "jpeg", "png", "gif", "bmp"], // 图片格式后缀};},methods: {async openFile(file) {try {const response = await axios.get(`/bbjApi/system/systemfile/${file.id}`, {responseType: "blob", // 设置响应类型为 blob});const blob = new Blob([response.data], {type: response.headers["content-type"],});const url = window.URL.createObjectURL(blob);// 根据文件类型设置预览方式const lowerCaseInput = file.name.toLowerCase();if (this.imageExtensions.some((ext) => lowerCaseInput.endsWith("." + ext))) {// 如果是图片类型,创建弹窗进行预览this.createImageModal(url);} else {// 其他类型的文件直接下载this.downloadFile(url, file.name);window.URL.revokeObjectURL(url); // 释放对象 URL}} catch (error) {this.$message.error("打开文件异常,请联系管理员");}},createImageModal(url) {// 创建弹窗容器const modalContainer = document.createElement("div");modalContainer.style.position = "fixed";modalContainer.style.top = "0";modalContainer.style.left = "0";modalContainer.style.width = "100%";modalContainer.style.height = "100%";modalContainer.style.backgroundColor = "rgba(0, 0, 0, 0.7)";modalContainer.style.zIndex = "9999";modalContainer.style.display = "flex";modalContainer.style.justifyContent = "center";modalContainer.style.alignItems = "center";// 创建图片元素const imgElement = document.createElement("img");imgElement.src = url;imgElement.style.maxWidth = "80%";imgElement.style.maxHeight = "80%";// 创建关闭按钮const closeButton = document.createElement("button");closeButton.textContent = "关闭";closeButton.style.position = "absolute";closeButton.style.top = "10px";closeButton.style.right = "10px";closeButton.style.padding = "5px 10px";closeButton.style.backgroundColor = "#409EFF";closeButton.style.border = "none";closeButton.style.cursor = "pointer";closeButton.style.borderRadius = "10px";closeButton.style.color = "#fff";// 点击关闭按钮时移除弹窗closeButton.addEventListener("click", () => {document.body.removeChild(modalContainer);window.URL.revokeObjectURL(url); // 释放对象 URL});// 将图片和关闭按钮添加到弹窗容器中modalContainer.appendChild(imgElement);modalContainer.appendChild(closeButton);// 将弹窗容器添加到页面主体中document.body.appendChild(modalContainer);},downloadFile(url, fileName) {// 创建下载链接const link = document.createElement("a");link.href = url;link.setAttribute("download", fileName);document.body.appendChild(link);link.click();document.body.removeChild(link);},handleFileSuccess(response, file, fileList) {// 处理文件上传成功的回调console.log("文件上传成功", response);},handleFileRemove(file, fileList) {// 处理文件移除的回调console.log("文件移除", file);},handleFileError(error, file, fileList) {// 处理文件上传失败的回调console.error("文件上传失败", error);},},
};
</script><style>
/* 可以根据需要添加样式 */
</style>

1.2 组件说明

  • el-upload 组件配置:配置了文件上传的基本参数,如上传地址、成功、移除和失败的回调函数等。
  • openFile 方法:异步方法,根据文件类型进行预览或下载。如果是图片类型,则创建一个模态框显示图片;否则,直接下载文件。
  • createImageModal 方法:创建图片预览的模态框,包括显示图片和关闭按钮。
  • downloadFile 方法:创建下载链接并进行下载。

2.注意事项

  • Blob 对象:用于处理从服务器获取的二进制数据,如图片内容。
  • 文件类型判断:通过文件后缀名判断文件类型,这里示例了图片类型的判断方式。

通过以上方法,你可以在 Vue.js 项目中利用 Element UI 的 el-upload 组件实现文件上传并根据文件类型进行预览或下载的功能。这样的实现不仅提升了用户体验,还增加了系统的交互性和可用性。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/41325.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

RAM和ROM的区别

RAM和ROM的区别 RAM和ROM都是用来存东西的&#xff0c;比如我们熟悉的CPU缓存、电脑和手机的内存就是属于RAM&#xff0c;而固态硬盘、U盘&#xff0c;还有我们买手机时候说的32G、64G的存储空间&#xff0c;就属于ROM。RAM和ROM的区别&#xff0c;简单说就是RAM在断电之后&am…

正则表达式语法+常用正则表达式

1. 简介 1> 正则表达式(Regular Expression)是一种文本模式&#xff0c;包括普通字符&#xff08;例如&#xff0c;a 到 z 之间的字母&#xff09;和特殊字符&#xff08;称为"元字符"&#xff09;&#xff0c;可以用来描述和匹配字符串的特定模式 2> 正则表达…

沙龙回顾|MongoDB如何充当企业开发加速器?

数据不仅是企业发展转型的驱动力&#xff0c;也是开发者最棘手的问题。前日&#xff0c;MongoDB携手阿里云、NineData在杭州成功举办了“数据驱动&#xff0c;敏捷前行——MongoDB企业开发加速器”技术沙龙。此次活动吸引了来自各行各业的专业人员&#xff0c;共同探讨MongoDB的…

Java使用线程实现异步运行

在Java中&#xff0c;实现异步运行的一个常用方式是使用Thread类。下面&#xff0c;我将给出一个详细且完整的示例&#xff0c;该示例将创建一个简单的异步任务&#xff0c;该任务将模拟一个耗时的操作&#xff08;比如&#xff0c;模拟网络请求或文件处理&#xff09;。 1. 使…

【MySQL】mysql访问

mysql访问 1.引入MySQL 客户端库2.C/C 进行增删改3.查询的处理细节4.图形化界面访问数据库4.1下载MYSQL Workbench4.2MYSQL Workbench远程连接数据库 点赞&#x1f44d;&#x1f44d;收藏&#x1f31f;&#x1f31f;关注&#x1f496;&#x1f496; 你的支持是对我最大的鼓励&a…

第9章:Electron的安全性

在开发Electron应用时&#xff0c;安全性是一个非常重要的考虑因素。由于Electron应用可以访问Node.js的全部API&#xff0c;以及使用Web技术开发界面&#xff0c;因此需要特别注意安全问题。本章将介绍如何提高Electron应用的安全性&#xff0c;包括禁用不必要的功能、设置内容…

Javascript中Object、Array、String

Object 在JavaScript中&#xff0c;Object 类型是一种复杂的数据类型&#xff0c;用于存储键值对集合。它提供了多种方法来操作这些键值对&#xff0c;以及执行其他常见的操作。这里&#xff0c;我列出了一些 Object 类型的常见方法或特性&#xff0c;它们在日常编程中非常有用…

开思通智网-科技快报20240704:全球首个,人工智能之城,AI填报志愿

【本周新进展】 天大开发全球首个可开源片上脑机接口智能交互系统 https://tech.opensnn.com/chip/article/2826792 AI系统绘出“多彩”大脑布线图 https://news.sciencenet.cn/htmlnews/2024/7/525678.shtm 北京亦庄将建全域人工智能之城 https://tech.opensnn.com/chip/arti…

基于深度学习的文本框检测

基于深度学习的文本框检测&#xff08;Text Box Detection&#xff09;是一项重要的计算机视觉任务&#xff0c;旨在从图像中自动检测和定位文本区域。它在光学字符识别&#xff08;OCR&#xff09;、自动文档处理、交通标志识别等领域具有广泛的应用。以下是关于这一领域的系统…

快递物流运输中的锁控系统优缺点探讨

一、物流运输中锁控系统的重要性 1.1 保障货物安全 在物流运输过程中&#xff0c;货物安全是物流公司最为关注的问题之一。传统机械锁虽然在一定程度上提供了安全保障&#xff0c;但其缺点逐渐暴露&#xff0c;成为物流运输中的一个痛点。 易被破解&#xff1a;传统机械锁通…

drawio打开不显示,不在当前屏幕的解决方案

如果把drawio拖在外接显示器&#xff0c;关机前没有拖回主屏幕&#xff0c;那么下次打开它时如果用的不是原来那个显示器&#xff0c;它就无法正常显示。在任务栏上能看到有它&#xff0c;但是就是显示不出来。 经过卸载和其他的方式没有解决&#xff0c;就想到了&#xff0c;应…

基于MCU平台的HMI开发的性能优化与实战(下)

继上篇《基于MCU平台的HMI开发的性能优化与实战&#xff08;上&#xff09;》深入探讨了提升MCU平台HMI开发效率和应用性能的策略后&#xff0c;本文将专注于NXP i.MX RT1170 MCU平台的仪表盘开发实践。我们将重点介绍Qt for MCUs的优化技巧&#xff0c;展示如何通过实际案例应…

Qt:7.QWidget属性介绍(cursor属性-光标形状、font属性-控件文本样式、tooltip属性-控件提示信息)

目录 一、cursor属性-光标形状&#xff1a; 1.1cursor属性介绍&#xff1a; 1.2获取当前光标形状——cursor()&#xff1a; 1.3 设置光标的形状——setCursor()&#xff1a; 1.4 设置自定义图片为光标&#xff1a; 二、font属性-控件文本样式&#xff1a; 2.1font属性介绍…

antd-Table-可视化数据滚动

代码 // 使用方式 const Index () > {useScroll();return <Table />; }import { useEffect, useRef, useState } from react;export const useScroll (() > {let timer;function start() {const [isScroll, setIsScroll] useState(true);const scrollTopRef u…

代码随想录算法训练营Day59|110.字符串接龙、105.有向图的完全可达性、106.岛屿的周长

字符串接龙 110. 字符串接龙 (kamacoder.com) 主要参考代码随想录 代码随想录 (programmercarl.com) 目标&#xff1a;得到从beginStr转变为endStr所需的最少步数 过程&#xff1a;每次变换一个字母&#xff0c;每次变换的结果要在strList中。 对于一个图来说&#xff0c;…

excel批量修改一列单价的金额并保留1位小数

1.打开表格&#xff0c;要把单价金额变成现在的两倍&#xff0c;数据如下&#xff1a; 2.把单价这一列粘贴到一个新的sheet页面&#xff0c;在B2单元格输入公式&#xff1a;A2*2 然后按enter回车键,这时候吧鼠标放到B2单元格右下角&#xff0c;会出现一个黑色的小加号&#xf…

重大更新来袭!!《植物大战僵尸杂交版V2.1+修改器+融合版》

大家好&#xff01;每个软件更新总是令人兴奋不已。前段时间介绍的《植物大战僵尸》系列以其独特的策略玩法和丰富的植物角色&#xff0c;赢得了很多玩家的喜爱。而在今天&#xff0c;这款经典游戏全网最新版本——《植物大战僵尸&#xff1a;杂交版V2.1》正式推出&#xff0c;…

docker 环境下failed to start lsb故障解决

背景&#xff1a;从深信服超融合迁移虚拟机到VMWARE集群后&#xff0c;迁移后的虚拟机 centos 7 运行systemctl start network ,报错 Restarting network (via systemctl): Job for network.service failed. See systemctl status network.service and journalctl -xn for d…

Redis组建哨兵模式

主172.17.60.131 从172.17.60.130、172.17.60.129 redis部署 [rootlocalhost app]# tar xf redis-6.2.9.tar.gz [rootlocalhost app]# cd redis-6.2.9/ [rootlocalhost redis-6.2.9]# make MALLOClibc [rootlocalhost redis-6.2.9]# make install PREFIX/usr/local/redis…

Docker 中查看及修改 Redis 容器密码的实用指南

在使用 Docker 部署 Redis 容器时&#xff0c;有时我们需要查看或修改 Redis 的密码。本文将详细介绍如何在 Docker 中查看和修改 Redis 容器的密码&#xff0c;帮助你更好地管理和维护你的 Redis 实例。 一、查看 Redis 容器密码 通常在启动 Redis 容器时&#xff0c;我们会…