---

一、前言

在前端開發中，文件上傳和預覽是常見的功能需求之一。本文將介紹如何利用 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-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 組件實現文件上傳并根據文件類型進行預覽或下載的功能。這樣的實現不僅提升了用戶體驗，還增加了系統的交互性和可用性。