Element-ui上传图片按顺序展示

背景

不知道你上传图片的时候有没有过这样的情况，批量上传多张图片，可能因为图片大小或者网络问题，导致图片返回的顺序和上传时的顺序不一样。因为我们公司是做电商的，即使我们的支持拖动排序，运营还是希望图片能够严格的按照他们上传的顺序展示。

解决问题

在上传组件的on-success的方法中，有3个参数 response, file, fileList 其中fileList就是之前上传成功图片的集合，且upload组件提供了clearFiles方法，用来清空fileList，每次上传成功，我们调用clearFiles方法就行了

 

上代码

 

<template>
  <!-- 上传单张图片 -->
  <div v-if="!multiple" class="image-item">
    <div class="image-wrap" v-if="imgUrl">
      <img :src="imgUrl" :style="imgStyle" />
      <div class="icon-wrap" @click.stop="removeFile">
        <i class="el-icon-delete"></i>
      </div>
    </div>
    <el-upload
      v-else
      ref="imageUpload"
      action="//up.qbox.me"
      :before-upload="beforeUpload"
      :on-success="handleSuccess"
      class="image-uploader"
      :on-error="onError"
      :data="form"
      :show-file-list="false"
      :disabled="loading"
      accept="image/*">
      <i :class="loading ? 'el-icon-loading' : 'el-icon-plus'" :style="imgStyle"></i>
    </el-upload>
  </div>
  <!-- 上传多张图片 -->
  <div class="image-list" v-else>
    <draggable v-model="showImgList" :options="{group:'image'}" @change="dragChange">
      <div v-for="(image, index) in showImgList" :key="index" class="image-wrap">
        <img :src="imgUrl" :style="imgStyle" />
        <div class="icon-wrap" @click.stop="removeFile(index)">
          <i class="el-icon-delete"></i>
        </div>
      </div>
      <el-upload
        ref="imageListUpload"
        action="//up.qbox.me"
        :before-upload="beforeUpload"
        :on-success="handleSuccess"
        class="image-uploader"
        :on-error="onError"
        :data