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