Vue 拖拽上传：vue-draggable 和 vue-dropzone 实现方案

Vue 中实现拖拽上传可以使用 'vue-draggable' 和 'vue-dropzone' 这两个插件。

1. 使用 'vue-draggable' 插件实现拖拽排序和上传：

安装 'vue-draggable' 插件：

npm install vuedraggable

在 Vue 组件中使用 'vue-draggable'：

<template>
  <div>
    <draggable v-model="images" @change="handleChange">
      <div v-for="image in images" :key="image.id">
        <img :src="image.url" alt="image">
      </div>
    </draggable>
    <input type="file" @change="handleFileChange">
  </div>
</template>

<script>
import draggable from 'vuedraggable';

export default {
  components: {
    draggable,
  },
  data() {
    return {
      images: [],
    };
  },
  methods: {
    handleChange() {
      // 拖拽顺序改变后的处理逻辑
    },
    handleFileChange(event) {
      const files = event.target.files;
      // 处理上传文件的逻辑
    },
  },
};
</script>

2. 使用 'vue-dropzone' 插件实现拖拽上传：

安装 'vue-dropzone' 插件：

npm install vue2-dropzone

在 Vue 组件中使用 'vue-dropzone'：

<template>
  <div>
    <vue-dropzone @vdropzone-success="handleSuccess" @vdropzone-error="handleError"></vue-dropzone>
  </div>
</template>

<script>
import vueDropzone from 'vue2-dropzone';

export default {
  components: {
    vueDropzone,
  },
  methods: {
    handleSuccess(file) {
      // 上传成功后的处理逻辑
    },
    handleError(file, errorMessage) {
      // 上传失败后的处理逻辑
    },
  },
};
</script>

以上是两种常用的实现拖拽上传的方法，根据需求选择适合自己的插件和实现方式。