vue多图上传 拖拽排序

<template>
<div>
  <div class='dragplace'>
    <draggable class='dragplace' v-model="attachmentList" :options="{animation: 60,}" :move="getdata" @update="datadragEnd">
      <div class='bg' v-for="(child,index) in attachmentList" :key="index">
        <div class="iconbg">
          <i @click="handleFileRemove(child,index)" class="el-icon-delete tinyicon"></i>
          <img class='middleicon' @click="handleFileView(child,index)" :src="child.url" alt="">
        </div>
      </div>
    </draggable>
    <div>
      <label htmlFor="my-uploader">
        <div class="eva_upLoadBtn">
          <img class="eva_cameraImg" src="../../assets/images/nofiles.png" alt="">
          <span>添加照片</span>
        </div>
        <input id="my-uploader" style="display:none" ref='uploaderInputRef' multiple accept="image/*" type="file" @change='onFileChange' />
      </label>
    </div>
  </div>
  <el-dialog title="" :visible.sync="isEnlargeImage" :modal-append-to-body="false" top="8%" width="60%">
    <img @click="isEnlargeImage = false" style="width:100%;" :src="enlargeImage">
  </el-dialog>
</div>
</template>

<script>
import draggable from 'vuedraggable'
import {
  importMutilFileAttachment
} from '@/api/common'

export default {
  name: 'kks-image-mutil',
  components: {
    draggable
  },
  props: ['filesList', 'supplierid', 'code', 'type'],
  created() {
    console.log(this.fileList)
    if (this.filesList.length > 0) {
      this.fileList.forEach((item, index) => {
        this.attachmentList.push({
          url: process.env.OSS_URL + item.url
        })
      })
    }
  },
  watch: {
    filesList(newValue, oldValue) {
      if (newValue.length > 0) {
        this.fileList = []
        this.fileList = newValue
        this.attachmentList = []
        this.fileList.forEach((item, index) => {
          this.attachmentList.push({
            url: process.env.OSS_URL + item.url
          })
        })
      }else {
        this.fileList = []
        this.attachmentList = []
      }
    },
    visibleDialog(newValue, oldValue) {
      this.visibleDialog = newValue
    }
  },
  data() {
    return {
      fileList: this.filesList,
      attachmentList: [],
      isEnlargeImage: false,
      temploadimg: [],
      enlargeImage: ''
    }
  },
  methods: {
    async handleHttpRequest(option) {
      var self = this
      self.loadingExports(true)
      const formdata = new FormData()

      formdata.append('files', option)
      formdata.append('name', option.name)
      formdata.append('upload', option)
      formdata.append('code', this.code)
      formdata.append('supplier', this.supplierid)

      var res = await importMutilFileAttachment(formdata)
      if (res.status === 200) {
        self.close([{ url: res.data.entries, alt: '' }])
        self.loadingExports(false)
        console.log('Upload Success')
      } else {
        self.loadingExports(false)
        console.log('Upload failed')
      }
    },
    close(fileList) {
      this.$emit('importMutilFiles', fileList)
    },
    closeDialog() {
      this.$emit('loadmutilvisible', false)
    },
    loadingExports(flag) {
      this.$emit('loadingExports', flag)
    },
    getdata(data) {

    },
    datadragEnd(evt) {
      var oneId = ''
      var otherId = ''
      console.log('datadragEnd方法' + oneId + otherId)
      console.log('拖动前的索引 :' + evt.oldIndex)
      console.log('拖动后的索引 :' + evt.newIndex)
      this.$emit('changeIndexImage', { originIndex: evt.oldIndex, newIndex: evt.newIndex })
      // if (evt.newIndex === this.hotVOList.length - 1 && this.pageData.pageNum < Math.ceil(this.pageData.total / 10)) {}
    },
    handleFileView(item, index) {
      if (item.url) {
        this.enlargeImage = item.url
        this.isEnlargeImage = !this.isEnlargeImage
      }
    },
    handleFileRemove(item, index) {
      this.fileList.splice(index, 1)
      this.$emit('deleteMutilFiles', this.fileList)
    },
    change(val, filelist) {
      this.temploadimg = filelist
    },
    onFileChange(e) {
      var files = [...e.target.files]
      this.uploadSelectedFiles(files)
    },
    async uploadSelectedFiles(files) {
      var temp = []
      temp = await Promise.all(files.map(i => this.handleHttpRequest(i)))
      console.log(temp)
    }
  }
}
</script>

<style lang="scss" scoped>
.el-upload {
  width: 100%;

  .el-upload-dragger {
    width: 500px;
  }
}

.delteimg {
  float: right;
}

.eva_upLoadBtn {
  width: 150px;
  height: 150px;
  color: #999;
  border: 1px dashed #999;
  background: #F3F3F3;
  border-radius: 10px;
  margin: 10px 0;
  box-sizing: border-box;

  .eva_cameraImg {
    width: 60px;
    height: 60px;
    display: block;
    margin: 20px auto;
  }

  span {
    display: block;
    font-size: 12px;
    padding: 5px 0;
    text-align: center;
  }
}

.dragplace {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.middleicon {
  width: 148px;
  height: 148px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  border-radius: 10px;
}

.tinyicon {
  position: absolute;
  top: 0;
  right: 0;
  display: none;
}

.iconbg:hover .tinyicon {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
}

.iconbg {
  position: relative;
  width: 148px;
  height: 148px;

}

.bg {

  margin: 4px;
  display: flex;
  align-items: center;

  border: 1px solid rgb(26, 25, 25);
  box-sizing: border-box;
  border-radius: 10px;
}
</style>

使用

 form: {
        images: []}
                    <kks-image-mutil :type="attachments" :filesList='form.images' @importMutilFiles='importFilesParam' :deleteMutilFiles='importFiles' @changeIndexImage='changeImageMainIndex'></kks-image-mutil>

changeImageMainIndex(val) {
      if (this.form.images.length > 1) {
        var arr = this.form.images
        // var temp = null
        var i = val.originIndex
        var j = val.newIndex
        // this.getnewArr(i, j, arr)
        // temp = arr[i]
        // arr[i] = arr[j]
        // arr[j] = temp
        this.form.images = this.getnewArr(i, j, arr)
        this.$forceUpdate()
        // arr[i] = [arr[j], arr[j] = arr[i]][0]
      }
    },
    getnewArr(i, j, arr) {
      // i表示老的位置, j代表新位置
      var temp = arr[i]
      if (i > j) {
        for (; i - 1 >= j; i--) {
          arr[i] = arr[i - 1]
        }
      } else {
        for (; i + 1 <= j; i++) {
          arr[i] = arr[i + 1]
        }
      }
      arr[i] = temp
      return arr
    },
    importFilesParam(val) {
      this.form.images = this.form.images.concat(val)
    },
    importFiles(val) {
      this.form.images = val
    }