uni-file-picker 文件上传并且实现拖拽排序

要实现文件上传并且实现拖拽排序，我们需要用到 uni-file-picker 组件和 uni-list 组件，其中 uni-file-picker 组件用于文件的上传，uni-list 组件用于展示文件列表和实现拖拽排序的功能。

首先，在页面中引入 uni-file-picker 和 uni-list 组件：

<template>
  <view>
    <uni-file-picker @select="onSelect" :multiple="true" />
    <uni-list :sortable="true">
      <uni-list-item v-for="(file, index) in fileList" :key="file.id" :index="index" @sort="onSort">
        <uni-icons type="document" slot="media" color="#007aff"></uni-icons>
        <view class="uni-list-item__content">
          <view class="uni-list-item__title">{{ file.name }}</view>
          <view class="uni-list-item__text">{{ getFileSize(file.size) }}</view>
        </view>
        <uni-button type="primary" size="mini" @click="onRemove(index)">删除</uni-button>
      </uni-list-item>
    </uni-list>
  </view>
</template>

<script>
  import uniFilePicker from '@/components/uni-file-picker/uni-file-picker.vue'
  import uniList from '@/components/uni-list/uni-list.vue'
  import uniListItem from '@/components/uni-list-item/uni-list-item.vue'
  import uniIcons from '@/components/uni-icons/uni-icons.vue'
  import uniButton from '@/components/uni-button/uni-button.vue'

  export default {
    components: {
      uniFilePicker,
      uniList,
      uniListItem,
      uniIcons,
      uniButton
    },
    data() {
      return {
        fileList: []
      }
    },
    methods: {
      onSelect(files) {
        // 将文件列表存储到 data 中
        for (let i = 0; i < files.length; i++) {
          this.fileList.push({
            id: generateId(),
            file: files[i],
            name: files[i].name,
            size: files[i].size
          })
        }
      },
      onRemove(index) {
        // 删除对应的文件
        this.fileList.splice(index, 1)
      },
      onSort({ oldIndex, newIndex }) {
        // 移动对应的文件
        const file = this.fileList.splice(oldIndex, 1)[0]
        this.fileList.splice(newIndex, 0, file)
      },
      getFileSize(size) {
        // 格式化文件大小
        const units = ['B', 'KB', 'MB', 'GB', 'TB']
        let index = 0
        while (size > 1024 && index < units.length - 1) {
          size /= 1024
          index++
        }
        return `${size.toFixed(2)} ${units[index]}`
      }
    }
  }

  function generateId() {
    // 生成文件 id
    return Math.random().toString(36).substr(2, 9)
  }
</script>

在 `uni-file-picker` 组件中，我们设置了 `multiple` 属性为 `true`，用于支持多文件上传。当用户选择文件后，会触发 `select` 事件，我们将每个文件存储到 `fileList` 数组中，并为每个文件生成一个唯一的 id。

在 `uni-list` 组件中，我们设置了 `sortable` 属性为 `true`，用于启用拖拽排序功能。然后在 `uni-list-item` 组件中展示每个文件的信息，并添加了一个删除按钮，用于删除对应的文件。

在 `onRemove` 方法中，我们通过传入的 `index` 参数删除对应的文件。在 `onSort` 方法中，我们通过传入的 `oldIndex` 和 `newIndex` 参数实现对应文件的拖拽排序操作。

最后，在 `getFileSize` 方法中，我们将文件大小格式化为可读性更好的形式。

以上就是实现 uni-file-picker 文件上传并且实现拖拽排序的方法。