element-ui upload组件 +vue.draggable 实现上传图片后拖拽排序```js // 安装vue

// 安装vue.draggable
  yarn add vuedraggable
  npm i -S vuedraggable

// 引用注册vue.draggable
  import draggable from 'vuedraggable'
    components: {
    draggable
      },

// html
      <el-form-item label="门店头图" class="push-img" prop="img_banner">
        <div style="display: flex;height: 110px;">
          <!-- 使用element-ui自带样式 -->
          <ul class="el-upload-list el-upload-list--picture-card">
            <draggable v-model="editForm.img_banner">
              <li v-for="(item, index) in editForm.img_banner" :key="item.index" class="el-upload-list__item is-success animated">
                <img :src="item.url" alt="" class="el-upload-list__item-thumbnail ">
                <i class="el-icon-close"></i>
                <span class="el-upload-list__item-actions">
                  <!-- 预览 -->
                  <span class="el-upload-list__item-preview" @click="handlePictureCardPreviewFileDetail(item)">
                    <i class="el-icon-zoom-in"></i>
                  </span>
                  <!-- 删除 -->
                  <span class="el-upload-list__item-delete" @click="handleRemoveFileDetail(index)">
                    <i class="el-icon-delete"></i>
                  </span>
                </span>
              </li>
            </draggable>
          </ul>
          <el-upload :action="actionUrl" list-type="picture-card" :on-preview="handleHeadPicturePreview" :on-remove="handleHeadRemove" :before-upload="beforeAvatarUpload" :on-success="handlePushHeadPicture" :show-file-list="false" multiple :headers="header"  :file-list="heard_showfileList" style="height: 104px">
            <i class="el-icon-plus"></i>
          </el-upload>
        </div>
        <div class="el-upload__tip">最多可上传8张图片，不大于5M，支持png、jpg、jepg格式</div>
        <!-- 预览弹出层 -->
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
      </el-form-item>

// js
    handlePictureCardPreviewFileDetail(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 删除
    handleRemoveFileDetail(index) {
      this.editForm.img_banner.splice(index, 1);
    },