Vue如何实现文件预览和下载功能的前端上传组件_Vue.js

前言

在前端开发中，文件上传和预览是常见的功能需求之一。本文将介绍如何利用 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>