vue drag拖拽上传

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

使用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>

使用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>

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