vue 多文件上传排序

为了实现多文件上传排序，可以使用以下步骤：

1. 在 HTML 中添加一个可排序的列表，用于显示上传的文件。可以使用 `<ul>` 和 `<li>` 元素来创建列表。

2. 在 Vue 组件中定义一个数组，用于保存上传的文件。每个文件对象应该包含文件名、文件大小、文件类型和文件内容等属性。

3. 在组件中添加一个文件选择器，用于选择要上传的文件。当用户选择文件时，将文件对象添加到数组中。

4. 在列表中显示上传的文件。可以使用 `v-for` 指令遍历文件数组，并使用 `v-bind` 指令将文件属性绑定到列表项上。

5. 添加一个“上传”按钮，用于触发上传操作。当用户点击按钮时，遍历文件数组，并使用 AJAX 或其他方式将文件上传到服务器。

6. 添加排序功能。可以使用 `v-sortable` 插件或其他可排序的库来实现文件排序。当用户拖动列表项时，更新文件数组的顺序。

7. 更新上传操作，以便按照文件数组的顺序上传文件。可以使用 `Promise.all()` 方法或其他方式确保所有文件都已上传完成。

8. 可以添加其他功能，如删除文件、取消上传、暂停上传等。

下面是一个简单的组件示例：

<template>
  <div>
    <input type="file" multiple @change="onFileSelected">
    <ul>
      <li v-for="(file, index) in files" :key="file.name" v-sortable>
        {{ file.name }} - {{ file.size }} bytes - {{ file.type }}
        <button @click="deleteFile(index)">Delete</button>
      </li>
    </ul>
    <button @click="uploadFiles">Upload</button>
  </div>
</template>

<script>
import 'v-sortable/lib/v-sortable.css'
import Sortable from 'v-sortable'

export default {
  data() {
    return {
      files: []
    }
  },
  directives: {
    sortable: Sortable
  },
  methods: {
    onFileSelected(event) {
      const fileList = event.target.files
      for (let i = 0; i < fileList.length; i++) {
        const file = fileList[i]
        this.files.push({
          name: file.name,
          size: file.size,
          type: file.type,
          content: file
        })
      }
    },
    deleteFile(index) {
      this.files.splice(index, 1)
    },
    uploadFiles() {
      const sortedFiles = this.files.slice().sort((a, b) => {
        return a.order - b.order
      })
      const promises = sortedFiles.map(file => {
        return new Promise((resolve, reject) => {
          // Upload file to server
        })
      })
      Promise.all(promises).then(() => {
        console.log('All files uploaded')
      }).catch(error => {
        console.error(error)
      })
    }
  }
}
</script>