antd vue中的upload如何根据所选顺序上传

在 Ant Design Vue 中，如果你想要实现按照用户选择的顺序上传文件，你可以使用 Upload 组件结合数组和`fileList`属性。首先，你需要创建一个数组来存储文件的索引，并在`on-change`事件中更新这个数组，每选择一个文件就将其对应的索引添加到数组中。

<template>
  <a-upload
    :action="uploadUrl"
    :list-type="fileList.length > 0 ? 'drag' : 'select'"
    :data-key="index"
    :before-upload="beforeUpload"
    :on-change="handleChange"
    @finish="handleFinish"
  >
    <a-icon slot="trigger" type="upload"></a-icon>
    <p class="ant-upload-text">点击上传</p>
    <div v-if="fileList.length">
      <ul>
        <li v-for="(file, index) in fileList" :key="file.uid">
          {{ file.name }} - {{ index + 1 }}
          <a-icon type="delete" @click="handleRemove(index)"></a-icon>
        </li>
      </ul>
    </div>
  </a-upload>
</template>

<script>
export default {
  data() {
    return {
      uploadUrl: '',
      fileList: [],
      index: 0,
    };
  },
  methods: {
    beforeUpload(file) {
      // 在这里可以添加文件验证等逻辑
      return true;
    },
    handleChange(info) {
      if (info.file.status === 'success') {
        this.fileList.push({
          uid: info.file.response.id, // 假设服务器返回了唯一标识符
          name: info.file.name,
          status: info.file.status,
          percent: info.file.percent,
        });
        this.index++; // 更新索引
      }
    },
    handleRemove(index) {
      this.fileList.splice(index, 1);
    },
    handleFinish(file) {
      // 文件上传完成后处理逻辑
    },
  },
};
</script>

在这个例子中，用户每次选择文件都会将当前索引加1，并且显示在列表中。当你需要上传时，可以直接按列表中的顺序通过`handleRemove`和`handleFinish`方法操作。