实现效果：

功能实现：

要实现图片的拖拽功能首先需要安装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].urlthis.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>