ant design vue2 实现图片上传并拖拽位置

可以通过使用Ant Design Vue的Upload组件和Dragger组件实现图片上传并拖拽位置。具体代码示例如下：

<template>
  <div>
    <a-upload
      :action="uploadUrl"
      :before-upload="beforeUpload"
      :on-success="onSuccess"
    >
      <a-icon type="upload" /> Click to Upload
    </a-upload>
    <a-dragger
      :action="uploadUrl"
      :before-upload="beforeUpload"
      :on-success="onSuccess"
    >
      <p class="ant-upload-drag-icon">
        <a-icon type="inbox" />
      </p>
      <p class="ant-upload-text">Click or drag file to this area to upload</p>
      <p class="ant-upload-hint">Support for a single or bulk upload.</p>
    </a-dragger>
    <img :src="imageUrl" width="200" height="200" style="margin-top: 20px;">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: '',
      uploadUrl: 'your-upload-server-url'
    };
  },
  methods: {
    beforeUpload(file) {
      // 在这里可以对文件进行校验，例如大小、类型等
      console.log('before upload', file);
    },
    onSuccess(response, file, fileList) {
      // 上传成功后的回调函数
      console.log('upload success', response, file, fileList);
      this.imageUrl = URL.createObjectURL(file.raw);
    }
  }
};
</script>

在这段代码中，我们使用了`a-upload`组件和`a-dragger`组件来展示图片上传的界面。`a-upload`组件可以通过单击上传按钮或者拖拽到上传区域来完成文件上传；`a-dragger`组件则是将上传区域改为了一个拖拽框，视频等其他多格式的文件也能方便的拖拽上传。同时，我们在`beforeUpload`函数中可以对文件进行校验，并在`onSuccess`函数中处理上传成功后的事件。最后设置`imageUrl`的值为上传图片的预览链接即可。