vue 基于 el-upload 实现多级分类

一时失言乱红尘 2024-02-05 22:45 8阅读 0赞

在 Vue 中使用 `el-upload` 实现多级分类上传可以通过以下步骤实现：

1.  创建一个 Vue 组件，并在其中添加 `el-upload` 组件。

<template>
      <div>
        <el-upload
          class="upload-demo"
          action="/your-upload-api"
          :on-success="handleSuccess"
          :before-upload="beforeUpload"
          :file-list="fileList"
        >
          <div class="file-item">
            <div class="file-item-content">
              <div class="file-item-title">{
       { fileList[currentFileIndex].name }}</div>
              <el-button size="small" type="primary">展开</el-button>
            </div>
            <div v-if="currentFileIndex < fileList.length - 1" class="file-item-separator"></div>
          </div>
        </el-upload>
      </div>
    </template>

1.  在 Vue 组件的 `data` 中添加一个 `fileList` 数组，用于存储上传的文件列表。同时，还需要添加一个 `currentFileIndex` 变量，用于跟踪当前正在上传的文件在 `fileList` 中的索引。

data() {
        
      return {
        
        fileList: [], // 上传文件列表
        currentFileIndex: -1 // 当前正在上传的文件索引
      };
    },

1.  在 Vue 组件的 `methods` 中添加 `beforeUpload` 方法，用于处理上传前的逻辑，例如对文件进行分类。在这个方法中，可以根据需要添加对文件进行分类的逻辑。示例代码如下：

methods: {
        
      beforeUpload(file) {
        
        // 根据文件名、扩展名等进行分类处理，这里以一级分类为例
        const fileType = file.name.split('.')[file.name.split('.').length - 1]; // 获取文件类型（例如：jpg、png）
        const category = fileType.charAt(0).toUpperCase(); // 获取一级分类（例如：图片）
        this.fileList.push({
         name: file.name, category: category }); // 将文件添加到文件列表中，并设置一级分类属性
        return file; // 返回文件对象，以便后续上传操作可以使用该对象进行操作
      },
      // 其他方法...
    },

1.  在 Vue 组件的模板中添加一个展开按钮，用于展开当前上传的文件并进行二级分类。在 `v-if` 条件中添加一个 `currentFileIndex < fileList.length - 1` 来确保只有一个展开按钮。示例代码如下：

这样就可以通过 `el-upload` 组件实现多级分类上传了。在 `beforeUpload` 方法中可以根据需要对文件进行更高级别的分类，并存储到 `fileList` 数组中。通过展开按钮，可以对当前上传的文件进行二级分类，以便更好地管理上传的文件。