用户分组拖动图片和填写信息 antd+vue2代码<a-upload-dragger>用这个

在Ant Design Vue2中，`<a-upload-dragger>`组件允许用户通过拖放的方式上传文件，并可以配合Vue组件的动态绑定和状态管理来实现用户分组并操作图片。这里简单解释一下如何使用它来满足你的需求：

首先，你需要安装`ant-design-vue`库，如果还没有安装，可以在项目中运行`npm install antd@latest ant-design-vue@latest`。

然后，在你的Vue组件模板部分，你可以这样设置`<a-upload-dragger>`：

<template>
  <div>
    <a-upload-dragger
      ref="uploadDragger"
      :action="'file/upload-url'" // 你的上传URL
      @dragstart="onDragStart" // 拖拽开始事件
      @drop="onDrop" // 拖拽结束事件
      :data="groupInfo" // 分组信息，可以动态改变
      :list-type="listType"
      class="ant-upload drag-enter"
    >
      <p slot="text">将图片拖到此处</p>
      <p slot="tip">或者点击选择图片</p>
    </a-upload-dragger>

    <!-- 你的分组列表或表单，用于展示和编辑信息 -->
    <div v-for="(item, index) in groupList" :key="index">
      <img :src="item.url" :alt="item.title" />
      <input type="text" v-model="item.title" placeholder="请输入图片标题" />
    </div>
  </div>
</template>

接下来，定义相关的数据和方法：

<script>
import { ref } from 'vue';
import { UploadDragger } from 'ant-design-vue';

export default {
  components: {
    UploadDragger,
  },
  data() {
    return {
      groupInfo: {
        name: '',
        files: [],
      },
      groupList: [], // 初始化一组空的分组数组
      listType: 'text', // 可以为'text'(默认文本模式), 'drag'(默认拖拽模式)
      // 其他必要状态变量...
    };
  },
  methods: {
    onDragStart(e) {
      console.log('开始拖动', e);
      this.groupInfo.files = [];
    },
    onDrop(e) {
      e.preventDefault();
      const droppedFiles = e.dataTransfer.files; // 获取已选文件
      if (droppedFiles.length > 0) {
        droppedFiles.forEach(file => {
          this.groupInfo.files.push(file);
        });
        this.updateGroupInfo(); // 更新分组信息
      }
    },
    updateGroupInfo() {
      // 根据当前的groupInfo，更新groupList
      this.groupList = [...this.groupInfo.files.map(file => ({ url: URL.createObjectURL(file), title: ''}))]
    },
  },
};
</script>

这样，你就创建了一个可以拖动图片并能填写信息的用户分组功能。用户可以上传图片、添加标题，同时也可以通过`dragenter`和`dragleave`等CSS样式控制拖放效果。