ant design vue 图片上传并拖拽

好的，可以使用 ant design 的 Upload 组件来实现图片上传和拖拽功能。具体步骤如下：

1. 引入 Upload 组件和 message 组件（用于提示消息）

import { Upload, message } from 'ant-design-vue';

2. 在 template 中使用 Upload 组件，并配置 props

<Upload
  action="/upload"
  :before-upload="beforeUpload"
  :onChange="handleChange"
  :show-upload-list="false"
>
  <div class="upload-area">
    <span class="upload-icon">
      <i class="el-icon-plus"></i>
    </span>
    <span class="upload-text">点击上传或将文件拖拽到此处</span>
  </div>
</Upload>

3. 在 methods 中实现 beforeUpload 和 handleChange 方法

methods: {
  beforeUpload(file) {
    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
    if (!isJpgOrPng) {
      message.error('只能上传 JPG/PNG 格式的图片');
      return false;
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
      message.error('图片大小不能超过 2MB');
      return false;
    }
    return true;
  },
  handleChange(info) {
    if (info.file.status === 'done') {
      message.success(`${info.file.name} 上传成功`);
      // 上传成功后的操作，比如更新页面上的图片列表等
    } else if (info.file.status === 'error') {
      message.error(`${info.file.name} 上传失败`);
    }
  },
}

其中 beforeUpload 方法用于判断上传的文件格式和大小，handleChange 方法用于处理上传结果并给出提示。

4. 在样式中设置上传区域的样式，用于实现拖拽效果

.upload-area {
  border: 1px dashed #d9d9d9;
  border-radius: 4px;
  cursor: pointer;
  padding: 40px 20px;
  text-align: center;
}
.upload-area:hover {
  border-color: #1890ff;
}
.upload-icon {
  display: inline-block;
  font-size: 32px;
  margin-bottom: 10px;
}
.upload-text {
  display: block;
  font-size: 14px;
  color: #666;
}

以上就是使用 ant design vue 实现图片上传和拖拽的方法。希望对你有帮助！