使用vuedraggable图片拖拽排序并支持element-ui 图片上传upload

下载插件

npm install vuedraggable

引入插件

import draggable from 'vuedraggable'; // 拖动插件

注册组件

components: { 
    draggable
}

使用

              <draggable
                class="el-upload-list el-upload-list--picture-card" 
                v-model="fileList"
                @start="isDragging = true"   //拖拽前
                @end="isDragging = false"    //拖拽后
                @update="updateList"         //更新
              >
              ~~~内容~~~
              </draggable>

事例

该事例配合element-ui的el-upload使用

vuedraggable组件要自己重写上传图片之后的样式，那样子才能使图片移动

例子样式主要使用el-upload的样式，并对其做了简单的修改

笔者还在移动图片的基础上添加了移动图片的文字信息，不需要的可自行删除

设置  :show-file-list="false"  不显示el-upload的图片列表

        <div class="pic">
          <el-form-item label="上传图片：">
            <ul class="el-upload-list el-upload-list--picture-card">
              <div>
              <draggable
                class="el-upload-list el-upload-list--picture-card" 
                v-model="fileList"
                @start="isDragging = true" 
                @end="isDragging = false"
                @update="updateList" 
              >

              <div class="el-upload-list__item is-success"
                  v-for="(item, index) in fileList"
                  :key="item + index"
                >
                <li>
                <div class="content1">
                  <img :src="item.url"  class="el-upload-list__item is-success"/>
                  <span class="el-upload-list__item-actions">
                    <span class="remove">
                    <i class="el-icon-remove" @click="delImg(index)"></i>
                  </span>
                  </span> 
                  

                  //文字信息
                  <i class="text" ref="ii" v-if="item.isShow" @click="input($event,index)">{{item.name.split('.')[0]}}</i> 
                  <textarea rows="2" class="text" maxlength="20"  
                  v-else  
                  id="textarea"
                  autofocus="autofocus"
                  :value="item.name.split('.')[0]" 
                  @input="inputChange($event,index)" 
                  @blur="blur(index)" 
                  onkeypress="if(window.event.keyCode==13) this.blur()"></textarea>
                  
                  
                </div>
               </li>
            </div>
            </draggable>
            </div>
            <li>
            <el-upload
              action="/api/upload"
              list-type="picture-card"
              :before-upload="beforeAvatarUpload"
              :on-success="handlerUploadSuccess"
              :limit="10"
              :show-file-list="false"
              :on-exceed="chooseImg"
              :headers="headers"
              :file-list="fileList"
              :before-remove="handlerBeforeRemove"
            >              
            <i class="el-icon-plus"></i>
            </el-upload>
          </li>
            </ul>
          </el-form-item>
        </div>

     // 拖拽更新数据
    async updateList (e) {
      const newIndex = e.newIndex// 新位置下标
      const oldIndex = e.oldIndex// 原始位置下标
      // 打印出新位置 位置从0开始算
      console.log(newIndex)
      console.log(oldIndex)
      // 打印出来的为该位置的对象
      console.log(this.fileList)
    },

献上笔者使用的样式，可能会有点小问题，别介哈 ~

希望可以帮到你 ~

.pic {
  .el-form-item__content{
    width: 770px;
  }
  .el-upload-list--picture-card{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .el-upload-list--picture-card 
  .el-upload-list__item{
    margin: 0px 33px 65px 0px;
    overflow: visible;

  }
  .el-upload-list--picture-card .el-upload-list__item-actions{
    height: 92%;
    width: 148px;
    border-radius: 6px;
  }
  .el-upload-list__item-actions{
    .remove{
      position: relative;
      left:45px;
      .el-icon-remove{
        position: absolute;
        top: -80px;
        font-size: 28px;
        color: red;
      }
    }
  }
  .content1{
    height: 160px;
    position: relative;
    .text{
      position: absolute;
      display: block;
      width: 148px;
      height: 50px;
      top:155px;
      word-wrap:break-word; 
      word-break:break-all;
      -webkit-line-clamp: 2;
      overflow: hidden;
      left:0px;
      z-index: 99999;
    }
  }
  img{
    width: 148px;
    height: 148px;
    display: inline-block;
  } 
  textarea {
    width: 22%;
    font-size: 16px;
    border-color: pink;
  }
}