当前位置:首页 » 《关于电脑》 » 正文

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

4 人参与  2024年10月04日 10:40  分类 : 《关于电脑》  评论

点击全文阅读


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-upload      v-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://zhangshiyu.com/post/167552.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

关于我们 | 我要投稿 | 免责申明

Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1