图片上传+拖动排序（vue2+elementUI+vuedraggable）

在本文中，我们将深入探讨如何使用Vue2、ElementUI和vuedraggable库来实现一个功能完善的图片上传和拖动排序系统。这个系统允许用户上传图片，并在上传后通过拖拽来调整图片的顺序，同时支持查看原图和删除图片。 ### Vue2简介 Vue2是Vue.js框架的第二个主要版本，它是一个轻量级的前端JavaScript框架，用于构建用户界面。Vue2引入了虚拟DOM、组件化、响应式数据绑定等特性，使得开发更加高效和易于维护。 ### ElementUI介绍 ElementUI是一套基于Vue2的开源UI组件库，提供了一整套企业级的Web应用界面解决方案。它包含了大量的预设组件，如表格、按钮、对话框、通知、下拉菜单等，使得开发者可以快速搭建出美观的后台管理界面。 ### vuedraggable概述 vuedraggable是基于Sortable.js的Vue2适配器，它实现了基于HTML5拖放API的拖曳排序功能。这个库允许在Vue组件中轻松实现拖放操作，非常适合用来实现图片排序这样的应用场景。 ### 实现步骤 1. **安装依赖** 你需要在项目中安装Vue2、ElementUI和vuedraggable。可以使用npm或yarn进行安装： ``` npm install vue element-ui vuedraggable # 或 yarn add vue element-ui vuedraggable ``` 2. **引入组件** 在main.js文件中导入并使用这些库： ```javascript import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; import draggable from 'vuedraggable'; Vue.use(ElementUI); Vue.component('draggable', draggable); ``` 3. **创建组件** 创建一个名为`ImageUploader.vue`的组件，它将负责图片上传和拖动排序的功能。在这个组件中，我们需要定义数据属性来存储图片列表、处理上传事件以及实现拖动排序的逻辑。 4. **图片上传** 使用ElementUI的`el-upload`组件来实现图片上传。设置`action`属性指向图片上传的服务器接口，`on-success`事件处理成功上传后的回调，更新图片列表。 ```html <el-upload :action="uploadUrl" :file-list="imageList" :on-success="handleSuccess" ... > </el-upload> ``` 5. **拖动排序** 使用vuedraggable的`<draggable>`组件，将图片列表作为数据源，监听`@change`事件，更新排序后的图片列表。 ```html <draggable v-model="imageList" @change="handleChange"> <template v-for="(item, index) in imageList"> <div> <img :src="item.url" alt="" /> <!-- 其他操作按钮，如查看原图和删除 --> </div> </template> </draggable> ``` 6. **图片操作** 在每个图片项中添加查看原图和删除图片的按钮。使用ElementUI的`el-dialog`组件展示原图，`el-button`组件触发删除操作。 7. **事件处理** 在`methods`选项中定义`handleSuccess`和`handleChange`方法，分别处理图片上传成功和拖动排序后的逻辑。`handleChange`方法接收新的排序数组并更新`imageList`。 8. **样式调整** 使用CSS调整组件样式，确保图片展示美观，拖动操作流畅。 通过以上步骤，我们可以构建一个功能完善的图片上传和拖动排序系统。Vue2、ElementUI和vuedraggable的结合使得这一过程变得简单而高效。这个系统不仅提供了基本的图片上传功能，还允许用户通过直观的拖放操作自由调整图片顺序，同时支持查看大图和删除图片，为用户带来了良好的交互体验。