使用element实现一个文件上传下载组件，支持的格式包括word PDF png xls 等

最新推荐文章于 2024-11-28 11:27:07 发布

原创最新推荐文章于 2024-11-28 11:27:07 发布 · 1.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#pdf #前端框架

本文详细介绍了如何使用ElementUI框架实现一个可上传和下载文件的组件，涉及HTML模板和JavaScript代码，展示了数据配置、事件处理以及后端接口的配合。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

以下是一个基于Element UI框架实现的文件上传下载组件的示例代码：

HTML代码：

<template>
  <div>
    <el-upload
      class="upload-demo"
      ref="upload"
      :action="uploadUrl"
      :on-success="handleUploadSuccess"
      :file-list="fileList"
      :accept="acceptFormat"
      :limit="limitNum"
      multiple
      drag
      list-type="text">
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div class="el-upload__tip" slot="tip">只能上传{{acceptFormat}}格式的文件，每次上传的文件数量不能超过{{limitNum}}个，且文件大小不超过{{maxSize}}MB</div>
    </el-upload>
    <el-button type="primary" @click="handleDownload">下载文件</el-button>
  </div>
</template>

JavaScript代码：

<script>
export default {
  data() {
    return {
      uploadUrl: '/api/upload', // 文件上传地址
      fileList: [], // 已上传的文件列表
      acceptFormat: '.doc,.docx,.pdf,.png,.xls,.xlsx', // 支持上传的文件格式
      limitNum: 5, // 限制每次上传的文件数量
      maxSize: 20, // 限制文件的最大大小（MB）
      downloadUrl: '/api/download' // 文件下载地址
    };
  },
  methods: {
    // 文件上传成功后的回调函数
    handleUploadSuccess(response, file, fileList) {
      console.log('上传成功', response, file, fileList);
      this.fileList = fileList;
    },
    // 下载文件
    handleDownload() {
      // 获取选中的文件的ID
      const selectedFiles = this.fileList.filter(file => file.checked);
      if (!selectedFiles || selectedFiles.length === 0) {
        this.$message.warning('请选择您要下载的文件');
        return;
      }
      // 构造下载链接，下载选中的文件
      const ids = selectedFiles.map(file => file.id);
      const url = this.downloadUrl + '?ids=' + ids.join(',');
      window.open(url);
    }
  }
};
</script>

该组件包含一个<el-upload>和一个<el-button>，<el-upload>用于上传文件，<el-button>用于下载文件。

组件的数据包括：

uploadUrl：文件上传地址。
fileList：已上传文件的列表。
acceptFormat：支持上传的文件格式，使用英文逗号分隔。
limitNum：限制每次上传的文件数量。
maxSize：限制文件的最大大小（MB）。
downloadUrl：文件下载地址。

组件的方法包括：

handleUploadSuccess：文件上传成功后的回调函数，用于更新文件列表。
handleDownload：点击下载按钮时的回调函数，用于构造下载链接并下载选中的文件。

注：该组件中的文件上传和下载功能均需要在后端实现对应的接口。