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

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

一、前言

在前端开发中，文件上传和预览是常见的功能需求之一。本文将介绍如何利用 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-buttontype="primary">点击上传</el-button></el-upload></div></template><script>import axios from'axios';exportdefault{data(){return{fileList:[],// 上传文件列表fileFormData:{},// 额外的上传参数，如果需要的话imageExtensions:["jpg","jpeg","png","gif","bmp"],// 图片格式后缀};},methods:{asyncopenFile(file){try{const response =await axios.get(`/bbjApi/system/systemfile/${file.id}`,{responseType:"blob",// 设置响应类型为 blob});const blob =newBlob([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

组件实现文件上传并根据文件类型进行预览或下载的功能。这样的实现不仅提升了用户体验，还增加了系统的交互性和可用性。