快捷導(dǎo)航

Vue如何實現(xiàn)文件預(yù)覽和下載功能的前端上傳組件

更新時間：2024年09月29日 10:27:51 作者：和燁

在Vue.js項目中,使用ElementUI的el-upload組件可以輕松實現(xiàn)文件上傳功能,通過配置組件參數(shù)和實現(xiàn)相應(yīng)的方法,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

前言

在前端開發(fā)中，文件上傳和預(yù)覽是常見的功能需求之一。本文將介紹如何利用 Vue.js 結(jié)合 Element UI 的上傳組件（el-upload）實現(xiàn)文件上傳，并根據(jù)文件類型進行預(yù)覽或下載的功能。

1.準(zhǔn)備工作

首先，確保你的項目中已經(jīng)引入了 Vue.js 和 Element UI。在這個示例中，我們使用了 el-upload 組件來管理文件上傳。

1.1 創(chuàng)建 Vue 組件

在 Vue 組件中，我們需要實現(xiàn)以下功能：

文件上傳功能
文件預(yù)覽功能（針對圖片類型）
文件下載功能（對于其他類型的文件）

<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: {}, // 額外的上傳參數(shù)，如果需要的話
      imageExtensions: ["jpg", "jpeg", "png", "gif", "bmp"], // 圖片格式后綴
    };
  },
  methods: {
    async openFile(file) {
      try {
        const response = await axios.get(`/bbjApi/system/systemfile/${file.id}`, {
          responseType: "blob", // 設(shè)置響應(yīng)類型為 blob
        });
        const blob = new Blob([response.data], {
          type: response.headers["content-type"],
        });
        const url = window.URL.createObjectURL(blob);

        // 根據(jù)文件類型設(shè)置預(yù)覽方式
        const lowerCaseInput = file.name.toLowerCase();
        if (this.imageExtensions.some((ext) => lowerCaseInput.endsWith("." + ext))) {
          // 如果是圖片類型，創(chuàng)建彈窗進行預(yù)覽
          this.createImageModal(url);
        } else {
          // 其他類型的文件直接下載
          this.downloadFile(url, file.name);
          window.URL.revokeObjectURL(url); // 釋放對象 URL
        }

      } catch (error) {
        this.$message.error("打開文件異常，請聯(lián)系管理員");
      }
    },
    createImageModal(url) {
      // 創(chuàng)建彈窗容器
      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";

      // 創(chuàng)建圖片元素
      const imgElement = document.createElement("img");
      imgElement.src = url;
      imgElement.style.maxWidth = "80%";
      imgElement.style.maxHeight = "80%";

      // 創(chuàng)建關(guān)閉按鈕
      const closeButton = document.createElement("button");
      closeButton.textContent = "關(guān)閉";
      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";

      // 點擊關(guān)閉按鈕時移除彈窗
      closeButton.addEventListener("click", () => {
        document.body.removeChild(modalContainer);
        window.URL.revokeObjectURL(url); // 釋放對象 URL
      });

      // 將圖片和關(guān)閉按鈕添加到彈窗容器中
      modalContainer.appendChild(imgElement);
      modalContainer.appendChild(closeButton);

      // 將彈窗容器添加到頁面主體中
      document.body.appendChild(modalContainer);
    },
    downloadFile(url, fileName) {
      // 創(chuàng)建下載鏈接
      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) {
      // 處理文件上傳成功的回調(diào)
      console.log("文件上傳成功", response);
    },
    handleFileRemove(file, fileList) {
      // 處理文件移除的回調(diào)
      console.log("文件移除", file);
    },
    handleFileError(error, file, fileList) {
      // 處理文件上傳失敗的回調(diào)
      console.error("文件上傳失敗", error);
    },
  },
};
</script>

<style>
/* 可以根據(jù)需要添加樣式 */
</style>

1.2 組件說明

el-upload 組件配置：配置了文件上傳的基本參數(shù)，如上傳地址、成功、移除和失敗的回調(diào)函數(shù)等。
openFile 方法：異步方法，根據(jù)文件類型進行預(yù)覽或下載。如果是圖片類型，則創(chuàng)建一個模態(tài)框顯示圖片；否則，直接下載文件。
createImageModal 方法：創(chuàng)建圖片預(yù)覽的模態(tài)框，包括顯示圖片和關(guān)閉按鈕。
downloadFile 方法：創(chuàng)建下載鏈接并進行下載。