作者用Vue3实现图片拖曳上传组件功能，非常实用

<template> <div class="upload-wrapper"> <div class="item-wrapper landscape" :id="item.id" v-for="item in data.photos" :key="item.id" draggable="true" @dragstart.stop="funcs.drag($event)" @dragend="funcs.dragend($event)" @dragover="funcs.dragover(item.id,$event)" @dragleave="funcs.dragleave(item.id)" @drop="funcs.drop(item.id,$event)" :style="'background-image: url('+item.path+')'" ><div class="item" ></div> <div class="del" @click="funcs.deletePhoto(item.id)">X</div> </div> </div> <div class="upload-btn"><input type="file" accept="image/*" @change="funcs.uploadPhoto($event)">上传</div></template><script>import {reactive} from 'vue'import {onMounted} from 'vue'import img1 from '../assets/1.jpg';import img2 from '../assets/2.jpg';import img3 from '../assets/3.jpg';import img4 from '../assets/4.jpg';export default{ name:"UploadImage", setup(){ let data =reactive({ msg:"hell", photos:[ {id:1,title:"",path:img1,sort:0}, {id:2,title:"",path:img2,sort:0}, {id:3,title:"",path:img3,sort:0}, {id:4,title:"",path:img4,sort:0}, {id:5,title:"",path:img1,sort:0}, {id:6,title:"",path:img2,sort:0}, {id:7,title:"",path:img3,sort:0}, {id:8,title:"",path:img4,sort:0}, ] }) let funcs =reactive({ drag:function(e){ e.target.classList.add("hover"); e.dataTransfer.setData("text/plain",e.target.id) e.dataTransfer.dropEffect = "copy";//拖曳时鼠标图标 }, dragend:function(e){ e.target.classList.remove("hover") }, dragover:function(id,e){ document.getElementById(id).classList.add("hover") e.preventDefault(); }, dragleave:function(id){ document.getElementById(id).classList.remove("hover") }, drop:function(id,e){ document.getElementById(id).classList.remove("hover") let dragId=e.dataTransfer.getData('text/plain'); this.sort(id,dragId); }, sort:function(targetId,sourceId) { let target,source; data.photos.forEach(function(item){ if( item.id==targetId){ target=item; } if( item.id==sourceId){ source=item; } }) //互换位置 data.photos.forEach(function(item,index,arr){ if( item.id==target.id){ arr[index]=source; } if( item.id==source.id){ arr[index]=target; } arr[index].sort=(index+1)*10; }) }, uploadPhoto:function (event) { let r = new FileReader(); r.readAsDataURL(event.target.files[0]) r.onload = function (e){ data.photos.push({id:9,title:"",path:this.result,sort:data.photos.length*10}) //上传至服务器代码... } }, deletePhoto:function (id) { data.photos.forEach(function(item,index,arr){ if( item.id===id){ data.photos.splice(index,1) } }) } }) onMounted(()=>{ }) return{ data,funcs, } }} </script><style> .upload-wrapper{display: flex;flex-wrap:wrap;padding: 0.5%;} .upload-wrapper .item-wrapper{width: 24%; background-color: bisque;margin: 0.5%; position: relative;background-repeat: no-repeat;background-position: 50% 50%;} .upload-wrapper .item-wrapper,.landscape{background-size: 100% auto;} .upload-wrapper .item-wrapper .del{position: absolute; right: 0; top: 0; width: 20px; height: 20px; background-color: black;color: #fff;line-height: 20px;cursor: pointer} .upload-wrapper .item-wrapper .item{padding: 100% 50% 0% 0%;} .upload-wrapper .hover{opacity: 0.3;} .upload-btn{overflow: hidden;background-color: #42b983;position: relative; height: 100px;} .upload-btn input{opacity: 0.01;width: 100%; height: 100%;position: absolute;}</style>