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

一、前言1.准备工作1.1 创建 Vue 组件1.2 组件说明

2.注意事项

一、前言

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

1.准备工作

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

1.1 创建 Vue 组件

在 Vue 组件中，我们需要实现以下功能：

文件上传功能文件预览功能（针对图片类型）文件下载功能（对于其他类型的文件）

<template>

<div>

<el-upload

v-model:file-list="fileList"code>

action="你的上传地址"code>

:on-success="handleFileSuccess"code>

:on-remove="handleFileRemove"code>

:on-error="handleFileError"code>

:limit="10"code>

:data="fileFormData"code>

name="files"code>

:on-preview="openFile"code>

>

<el-button type="primary">点击上传</el-button>code>

</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 组件说明