elemen upload 上传多图拖曳

需要的可以复制代码直接使用

<template>
  <div>
    <div class="itemContent flex">
      <draggable
        v-model="productForm.productPicList"
        class="list-group"
        tag="ul"
        v-bind="dragOptions"
        @start="productForm.drag = true"
        @end="productForm.drag = false"
      >
        <div
          v-for="(item,index) in productForm.productPicList"
          :key="index"
          v-loading="productForm.loadingapp"
          class="listitem"
          @mouseenter="showDelBtn(index)"
          @mouseleave="hiddenDelBtn"
        >
          <img v-if="item" :src="item" width="148" height="148" class="imgSty" />
          <i
            v-show="index==productForm.currentDelBtn"
            class="el-icon-delete delIcon"
            @click="deleImg(item,index)"
          />
        </div>
      </draggable>
      <div class="uploadIcon">
        <el-upload
          :show-file-list="false"
          :action="envs"
          multiple
          :headers="headers"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :file-list="fileList"
          accept="image/jpeg, image/jpg, image/png"
          :on-success="handleSuccess"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisiblen">
          <img width="100%" :src="dialogImageUrl" alt />
        </el-dialog>
      </div>
    </div>
  </div>
</template>
<script>
import draggable from "vuedraggable";
export default {
  components: {
    draggable
  },
  data() {
    return {
      productForm: {
        productPicList: [],
        currentDelBtn: -1,
        loadingapp: false,
        drag: false
      },
      envs: "",
      fileList: [],
      dialogVisiblen: false,
      dialogImageUrl: "",
      url: "",
      headers: { token: localStorage.getItem("token") }
    };
  },
  created() {
    this.url = localStorage.getItem("env");
    this.envs = this.url + "接口";
  },
  computed: {
    dragOptions() {
      return {
        animation: 200,
        group: "description",
        disabled: false,
        ghostClass: "ghost"
      };
    }
  },
  methods: {
    handleSuccess(file) {
      console.log(file);
      let url =  this.url + file.data.img
      this.productForm.productPicList.push(url);
    },
    handleRemove(e) {
      console.log(e);
    },
    handlePictureCardPreview(e) {
      console.log(e);
    },
    handleUploadHttpRequest() {},
    showDelBtn(index) {
      console.log(index);
      this.productForm.currentDelBtn = index;
      console.log(this.productForm.productPicList)
    },
    hiddenDelBtn() {
      this.productForm.currentDelBtn = -1;
    },
    deleImg(data, index) {
      this.productForm.productPicList.splice(index, 1);
      console.log( this.productForm.productPicList)
    },
  }
};
</script>
<style lang="css" scoped>
  .list-group{
    display: flex;
  }
  .listitem{
        margin: 0 8px 8px 0;
  }
  .delIcon{
 font-size: 20px
  }
</style>