怎么使用Element+VueDraggable实现图片上传拖拽排序

在现代Web开发中，图片上传和排序功能是非常常见的需求。本文将介绍如何使用Element UI和VueDraggable库来实现图片上传和拖拽排序功能。

1. 环境准备

首先，确保你已经安装了Vue.js和Element UI。如果还没有安装，可以通过以下命令进行安装：

npm install vue element-ui

接下来，安装vuedraggable库，它是一个基于Sortable.js的Vue组件，用于实现拖拽排序功能：

npm install vuedraggable

2. 创建Vue组件

创建一个Vue组件，用于实现图片上传和拖拽排序功能。我们将使用Element UI的el-upload组件来处理图片上传，并使用vuedraggable来实现拖拽排序。

<template>
  <div>
    <el-upload
      action="https://jsonplaceholder.typicode.com/posts/"
      list-type="picture-card"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :on-success="handleSuccess"
      :file-list="fileList"
      :limit="6"
      :on-exceed="handleExceed"
    >
      <i class="el-icon-plus"></i>
    </el-upload>

    <draggable v-model="fileList" @end="onDragEnd">
      <transition-group>
        <div v-for="(file, index) in fileList" :key="file.uid" class="image-item">
          <img :src="file.url" alt="" />
        </div>
      </transition-group>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable';

export default {
  components: {
    draggable,
  },
  data() {
    return {
      fileList: [],
    };
  },
  methods: {
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleRemove(file, fileList) {
      this.fileList = fileList;
    },
    handleSuccess(response, file, fileList) {
      this.fileList = fileList;
    },
    handleExceed(files, fileList) {
      this.$message.warning(`最多只能上传6张图片`);
    },
    onDragEnd() {
      console.log('拖拽结束，当前图片顺序：', this.fileList);
    },
  },
};
</script>

<style scoped>
.image-item {
  display: inline-block;
  margin: 10px;
  width: 100px;
  height: 100px;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
}

.image-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>

3. 代码解析

3.1 图片上传

我们使用Element UI的el-upload组件来实现图片上传功能。el-upload组件提供了多种上传方式，这里我们选择了list-type="picture-card"，以卡片形式展示上传的图片。

• action：指定上传的URL。
• list-type：设置上传列表的展示方式。
• on-preview：点击图片时的回调函数。
• on-remove：移除图片时的回调函数。
• on-success：上传成功时的回调函数。
• file-list：绑定上传的图片列表。
• limit：限制上传的图片数量。
• on-exceed：超出限制时的回调函数。

3.2 拖拽排序

我们使用vuedraggable组件来实现拖拽排序功能。vuedraggable组件通过v-model绑定图片列表，并在拖拽结束时触发@end事件。

• v-model：绑定图片列表。
• @end：拖拽结束时的回调函数。

3.3 样式

我们为图片列表添加了一些简单的样式，使其以网格形式展示，并设置了图片的尺寸和边框。

4. 运行效果

运行上述代码后，你将看到一个图片上传组件，用户可以通过点击“+”按钮上传图片。上传后的图片会以卡片形式展示，并且可以通过拖拽来调整图片的顺序。

5. 总结

通过结合Element UI和VueDraggable库，我们可以轻松实现图片上传和拖拽排序功能。Element UI提供了丰富的UI组件，而VueDraggable则为我们提供了强大的拖拽排序能力。希望本文能帮助你更好地理解如何使用这两个库来实现常见的Web功能。