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

在 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>

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

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

3. 在 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; // 返回文件对象，以便后续上传操作可以使用该对象进行操作
  },
  // 其他方法...
},

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

<template>
  <div>
    <!-- 其他代码... -->
    <el-button size="small" type="primary" @click="currentFileIndex < fileList.length - 1">展开</el-button>
  </div>
</template>

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