實現效果：

功能實現：

要實現圖片的拖拽功能首先需要安裝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>