在Vue大表单中实现多层级Upload组件的批量上传

How to Choose the Right File Upload Widget for Your Website | Techno FAQ

upload组件时，管理这些组件并在提交时实现批量上传是一项具有挑战性的任务。为了解决这一问题，创建一个顶层组件如<batch-upload>不仅可以简化上传逻辑，还能提高代码的可维护性和扩展性。本文将详细介绍如何在Vue项目中实现这一功能，并提供具体的代码示例与最佳实践。

概述

在一个复杂的Vue表单中，可能存在多个el-upload组件，这些组件分布在不同的子组件或嵌套层级中。为了在表单提交时统一处理这些上传组件，通常需要一个集中管理的顶层组件。该组件负责收集所有upload组件的文件，并在提交时统一上传，简化用户操作流程。

实现步骤

1. 创建顶层批量上传组件

首先，我们需要创建一个名为BatchUpload.vue的顶层组件，用于集中管理所有的上传操作。该组件将负责收集来自各个upload组件的文件，并在提交时统一上传。

BatchUpload.vue

<template>
  <form @submit.prevent="handleSubmit">
    <slot></slot>
    <el-button type="primary" @click="handleBatchUpload">提交</el-button>
  </form>
</template>

<script>
import axios from 'axios';
import { provide, ref } from 'vue';

export default {
  name: 'BatchUpload',
  setup() {
    const uploaders = ref([]);

    const registerUploader = (uploader) => {
      uploaders.value.push(uploader);
    };

    const handleBatchUpload = async () => {
      const allFiles = [];
      uploaders.value.forEach(uploader => {
        allFiles.push(...uploader.getFiles());
      });

      if (allFiles.length === 0) {
        alert('请先选择要上传的文件');
        return;
      }

      const formData = new FormData();
      allFiles.forEach(file => {
        formData.append('files', file.raw, file.name);
      });

      try {
        const response = await axios.post('https://your-api-endpoint.com/upload', formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        });
        if (response.data.status === 'OK') {
          alert('所有文件上传成功');
        }
      } catch (error) {
        console.error('上传失败', error);
        alert('文件上传失败，请重试');
      }
    };

    provide('registerUploader', registerUploader);
    provide('handleBatchUpload', handleBatchUpload);

    return {
      handleBatchUpload,
    };
  },
};
</script>

2. 创建子上传组件

接下来，创建子组件CustomUpload.vue，它将负责文件的选择，并将文件信息传递给顶层的BatchUpload组件。

CustomUpload.vue

<template>
  <el-upload
    ref="uploadRef"
    :auto-upload="false"
    :file-list="fileList"
    :on-change="handleFileChange"
    :before-upload="beforeUpload"
  >
    <el-button slot="trigger" size="small" type="primary">选择文件</el-button>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
  </el-upload>
</template>

<script>
import { inject, onMounted, ref } from 'vue';

export default {
  name: 'CustomUpload',
  props: {
    uploadLimit: {
      type: Number,
      default: 20
    },
    uploadAction: {
      type: String,
      default: 'https://your-api-endpoint.com/upload'
    }
  },
  setup(props) {
    const registerUploader = inject('registerUploader');
    const uploadRef = ref(null);
    const fileList = ref([]);

    const handleFileChange = (file, files) => {
      fileList.value = files.slice(0, props.uploadLimit);
    };

    const beforeUpload = (file) => {
      // 可以在这里添加文件类型和大小的验证逻辑
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
      const isLt500k = file.size / 1024 < 500;

      if (!isJPG) {
        this.$message.error('上传文件只能是 JPG/PNG 格式!');
      }
      if (!isLt500k) {
        this.$message.error('上传文件大小不能超过 500KB!');
      }

      return isJPG && isLt500k;
    };

    const getFiles = () => {
      return fileList.value;
    };

    onMounted(() => {
      registerUploader({
        getFiles
      });
    });

    return {
      uploadRef,
      fileList,
      handleFileChange,
      beforeUpload
    };
  },
};
</script>

3. 在表单中使用BatchUpload和CustomUpload组件

最后，将BatchUpload和CustomUpload组件结合使用，以实现多层级文件的批量上传。

FormComponent.vue

<template>
  <batch-upload>
    <el-form>
      <el-form-item label="文档部分一">
        <custom-upload />
      </el-form-item>
      
      <el-form-item label="文档部分二">
        <custom-upload />
      </el-form-item>
      
      <!-- 可以根据需要添加更多的CustomUpload组件 -->
      
      <el-form-item>
        <el-button type="primary" @click="submitForm">提交表单</el-button>
      </el-form-item>
    </el-form>
  </batch-upload>
</template>

<script>
import BatchUpload from './BatchUpload.vue';
import CustomUpload from './CustomUpload.vue';

export default {
  components: {
    BatchUpload,
    CustomUpload
  },
  setup() {
    const handleSubmit = () => {
      // BatchUpload组件已经绑定了提交逻辑
      // 可以在此处处理其他表单数据
    };

    return {
      submitForm: handleSubmit,
    };
  },
};
</script>