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

下载插件

npm install vuedraggable

引入插件

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

注册组件

components: { 
    draggable
}

使用

              
              ~~~内容~~~
              

事例

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

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

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

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

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

        

          
            

              

              

              

                

                

                  
                  
                    
                    
                  
                   
                  

                  //文字信息
                  {{item.name.split('.')[0]}} 
                  
                  
                  
                
               
            
            
            
            

                          
            
            
          
            
          
        

     // 拖拽更新数据
    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;
  }
}