element ui upload图片排序

在 Element UI 中，上传图片的排序可以通过以下步骤实现：

1. 使用 `el-upload` 组件来创建上传图片的区域，设置 `multiple` 属性以支持多图上传。

<el-upload
  class="upload-demo"
  action="/upload"
  :on-success="handleUploadSuccess"
  :before-upload="beforeUpload"
  :limit="3"
  :multiple="true"
>
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>

2. 在 `handleUploadSuccess` 方法中，将上传成功的图片保存到一个数组中，以便进行排序操作。

data() {
  return {
    uploadedImages: [], // 存放上传成功的图片
  };
},
methods: {
  handleUploadSuccess(response, file, fileList) {
    // 处理上传成功的逻辑
    this.uploadedImages = fileList.map(file => file.raw);
  },
}

3. 在页面上展示已上传的图片，并提供排序功能。

<el-image
  v-for="(image, index) in uploadedImages"
  :key="index"
  :src="URL.createObjectURL(image)"
  fit="contain"
  style="width: 100px; height: 100px; margin-right: 10px;"
>
</el-image>

<el-button type="primary" @click="sortImages">排序</el-button>

4. 实现 `sortImages` 方法来对已上传的图片进行排序。

methods: {
  sortImages() {
    this.uploadedImages.sort((a, b) => {
      // 根据需要的排序逻辑进行排序
      // 示例：按文件大小排序
      return a.size - b.size;
    });
  },
}

通过以上步骤，你可以在 Element UI 中实现上传图片的排序功能。请注意，这只是一个示例，你可以根据自己的需求调整排序逻辑。