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="http://edm.juyi.com.cn/system/fileUpload"
: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
组件实现文件上传并根据文件类型进行预览或下载的功能。这样的实现不仅提升了用户体验,还增加了系统的交互性和可用性。