vue中el-upload结合vuedraggable实现图片的上传、排序、删除以及预览等功能

实现效果：

功能实现：

要实现图片的拖拽功能首先需要安装vuedraggable库

npm install vuedraggable --save

在组件中引入并注册 vuedraggable

<script>
   import draggable from "vuedraggable";
   export default {
     // 注册组件
      components: {
        draggable,
      },
      data(){
        return {}
      }
   }
</script>

 使用element ui的el-upload组件，结合vuedraggable实现图片的上传与排序功能

<el-form-item label="上传轮播图" prop="image">
   <ul class="image-upload">
       <draggable v-model="fileList" @update="dataDragEnd">
           <transition-group class="uploader">
              <div v-for="(item, index) in fileList" :key="item.url" class="upload-list">
                 <img v-if="item.url" style="width:146px;height: 146px" :src="item.url">
                 <div class="icon-container">
                    <span v-if="item.url" @click="handlePreviewNew(index)">
                       <i class="el-icon-zoom-in"></i>
                    </span>
                    <span v-if="item.url" @click="handleRemoveNew(item, index)">
                       <i class="el-icon-delete"></i>
                    </span>
                  </div>
                </div>
             </transition-group>
         </draggable>
         <el-upload name="image" ref="uploadFile" class="upload-demo" action="#" multiple
            :on-preview="handlePreview" :on-remove="handleRemove" 
            :http-request="uolpadMorePic" :file-list="fileList" list-type="picture-card">
            <el-button size="small" type="primary">点击上传</el-button>
         </el-upload>
    </ul>
</el-form-item>
 <!-- 图片回显预览 -->
    <el-dialog title="图片预览" :visible.sync="previewVisible" width="50%" append-to-body>
      <img :src="previewPath" alt="" style="width:100%;height:100%" />
    </el-dialog>

上传图片时处理方法

    uolpadMorePic(file) {
      let up = new FormData();
      up.append("image", file.file);
      up.append("name", this.editForm.name);
      //上传图片接口
      bannerUp(up).then((res) => {
          if (res.status == "0000") {
            this.fileList.push({
              name: res.data.imageUrl,
              url: res.data.imageUrl,
              uid: Math.floor(Math.random() * 100000),
            })
            //上传的图片和回显的图片进行重新排序
            this.fileList.map((item, index) =>
              item.sortNum = index + 1
            )
            this.$message({
              type: "success",
              message: "上传成功",
            });
          } else {
            this.$message({
              type: "error",
              message: res.codemsg,
            });
            let uid = file.uid; // 关键作用代码，去除文件列表失败文件
            let idx = this.$refs.uploadFile.uploadFiles.findIndex(
              (item) => item.uid === uid
            ); // 关键作用代码，去除文件列表失败文件（uploadFiles为el-upload中的ref值）
            this.$refs.uploadFile.uploadFiles.splice(idx, 1); // 关键作用代码，去除文件列表失败文件
          }
        })
        .catch((err) => {
          console.log(err);
          let uid = file.uid; // 关键作用代码，去除文件列表失败文件
          let idx = this.$refs.uploadFile.uploadFiles.findIndex(
            (item) => item.uid === uid
          ); // 关键作用代码，去除文件列表失败文件（uploadFiles为el-upload中的ref值）
          this.$refs.uploadFile.uploadFiles.splice(idx, 1); // 关键作用代码，去除文件列表失败文件
        });
    },

图片查看、删除及拖拽排序

//删除图片
 handleRemoveNew(file, index) {
    this.fileList.splice(index, 1)
 },
 // 处理图片预览效果
 handlePreviewNew(index) {
    this.previewPath = this.fileList[index].url
    this.previewVisible = true
 },
 //拖拽图片排序
 dataDragEnd() {
    // 拖拽图片更换位置 并重新从1开始排序
    this.fileList.forEach((item, index) => {
      item.sortNum = index + 1
    })
    //过滤一下url为空的数据
    this.fileList = this.fileList.filter(item => {
      return item.url != ''
    });
 },

编辑弹窗图片回显

let res = 接口获取的详情数据
res.data.slider_image.map((item, index) => {
   this.fileList.push({
      url: item.url ,
      name: item.name,
      sortNum: index + 1,
    });
});

一些样式

<style lang="scss" scoped>
.image-upload {
  display: flex;
  list-style-type: none;
  margin: 0;
  padding: 0;

  .uploader {
    display: flex;
    align-items: center;

    .upload-list {
      margin-right: 8px;
      width: 146px;
      height: 146px;
      border-radius: 8px;
      overflow: hidden;
      border: 1px solid #c0ccda;
      position: relative;

      &:hover {
        .icon-container {
          display: block;
          transition: all 0.5s;
        }
      }

      .icon-container {
        position: absolute;
        display: none;
        transition: all 0.5s;
        width: 146px;
        height: 146px;
        line-height: 146px;
        color: #fff;
        font-size: 20px;
        text-align: center;
        border-radius: 8px;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, .5);

        span {
          margin: 0 10px;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
<style scoped>
//此处一定要将原el-upload的图片回显list隐藏，用自己写的
/deep/ .upload-demo .el-upload-list {
  display: none;
}
</style>