vue3+ts实现图片上传并可拖拽

实现多张图片拖拽上传，并且可以拖拽调整图片顺序的示例：

<template>
  <div>
    <el-upload
      ref="uploadRef"
      class="upload-demo"
      drag
      action="https://your-upload-url.com"
      :on-success="handleSuccess"
      :on-remove="handleRemove"
      multiple
    >
      <el-icon class="el-icon--upload"><upload-filled /></el-icon>
      <div class="el-upload__text">
        拖拽文件到此处或 <em>点击上传</em>
      </div>
    </el-upload>

    <div class="image-list" ref="imageListRef">
      <div
        v-for="(image, index) in images"
        :key="image.id"
        class="image-item"
        draggable="true"
        @dragstart="dragStart($event, index)"
        @dragover.prevent
        @dragenter.prevent
        @drop="drop($event, index)"
      >
        <el-image :src="image.url" fit="cover" />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { ElUpload, ElImage } from 'element-plus'
import { UploadFilled } from '@element-plus/icons-vue'

interface ImageItem {
  id: number
  url: string
}

const uploadRef = ref<InstanceType<typeof ElUpload>>()
const imageListRef = ref<HTMLElement>()
const images = ref<ImageItem[]>([])
let dragIndex = -1

const handleSuccess = (response: any, file: any) => {
  images.value.push({
    id: Date.now(),
    url: URL.createObjectURL(file.raw)
  })
}

const handleRemove = (file: any) => {
  const index = images.value.findIndex(img => img.url === file.url)
  if (index !== -1) {
    images.value.splice(index, 1)
  }
}

const dragStart = (event: DragEvent, index: number) => {
  dragIndex = index
  if (event.dataTransfer) {
    event.dataTransfer.effectAllowed = 'move'
  }
}

const drop = (event: DragEvent, index: number) => {
  if (dragIndex !== index) {
    const draggedImage = images.value[dragIndex]
    images.value.splice(dragIndex, 1)
    images.value.splice(index, 0, draggedImage)
  }
}

onMounted(() => {
  if (imageListRef.value) {
    imageListRef.value.addEventListener('dragover', (e: Event) => {
      e.preventDefault()
    })
  }
})
</script>

<style scoped>
.image-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.image-item {
  width: 100px;
  height: 100px;
  cursor: move;
}

.el-image {
  width: 100%;
  height: 100%;
}
</style>

这个示例实现了以下功能：

1. 使用 Element Plus 的 el-upload 组件实现拖拽上传功能。
2. 上传成功后，将图片添加到 images 数组中。
3. 可以删除已上传的图片。
4. 使用 HTML5 拖放 API 实现图片位置的拖拽调整。

注意事项：

1. 请将 action 属性替换为你的实际上传 URL。
2. 这个示例使用了 URL.createObjectURL() 来创建图片预览 URL。在实际应用中，你可能需要使用服务器返回的 URL。

关注微信公众号温暖前端，不定期分享前端知识点和前端资料↓↓↓