ant design vue 实现上传图片保存后图片回显用代码实现

可以使用 Ant Design Vue 中的 Upload 组件来实现上传图片，并在上传成功后将图片回显出来。示例代码如下：

<template>
  <div>
    <a-upload :action="uploadUrl" :headers="headers" :show-upload-list="false" :before-upload="beforeUpload" @success="handleUploadSuccess">
      <a-button>上传图片</a-button>
    </a-upload>
    <div v-if="imageUrl">
      <a href="javascript:void(0)" @click="handlePreview">
        <img :src="imageUrl" alt="上传的图片" style="max-width: 100%">
      </a>
    </div>
  </div>
</template>

<script>
import { message } from 'ant-design-vue'

export default {
  data () {
    return {
      uploadUrl: '上传图片的接口地址',
      headers: {}, // 上传图片需要的请求头
      imageUrl: null // 上传成功后的图片地址
    }
  },
  methods: {
    beforeUpload (file) {
      // 省略一些上传前的校验逻辑
    },
    handleUploadSuccess (response) {
      if (response.code === 0) {
        this.imageUrl = response.data.image_url
        message.success('上传成功！')
      } else {
        message.error('上传失败，请重新上传！')
      }
    },
    handlePreview () {
      // 点击图片进行预览的处理逻辑
    }
  }
}
</script>

在这个示例代码中，Upload 组件的 `action` 属性指定了上传图片的接口地址，`headers` 属性指定了上传图片需要的请求头。在上传成功后，通过 `handleUploadSuccess` 方法来获取上传成功后的图片地址，将其保存到 `imageUrl` 变量中，然后就可以将图片回显出来了。需要注意的是，这里省略了一些上传前的校验逻辑和点击图片进行预览的处理逻辑，需要根据实际情况进行实现。