怎么使用element+vuedraggable實現圖片上傳拖拽排序

怎么使用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功能。