如何在 Vant UI 中实现图片上传后显示对应的 URL？

在Vant UI中实现图片上传后显示对应URL的功能，通常会涉及到使用`vant-uploader`组件。以下是基本步骤：

1. 首先，在你的Vue项目中安装Vant Uploader插件：

   npm install vant vant-uploader

2. 在模板文件中引入`van-uploader`组件，并设置一个ref以便在JavaScript中操作它：

   <van-uploader v-model="uploader" :action="uploadUrl" :before-upload="beforeUpload" @change="handleImageChange">
     <div slot="tip">点击或拖拽上传</div>
   </van-uploader>

其中，`uploader`是一个引用变量，`uploadUrl`是你用来接收上传请求的地址。

3. 定义一些方法：
- `beforeUpload(file)`：预上传钩子，可以在这里做些验证或修改文件数据。
- `handleImageChange(response)`：上传完成后处理返回的响应，`response.url`就是你想要显示的图片URL。你可以将这个url绑定到某个元素上，如`<img>`标签的`src`属性。

export default {
  data() {
    return {
      uploader: '',
      uploadUrl: 'your-image-api-url', // 替换为实际的图片上传接口URL
    };
  },
  methods: {
    beforeUpload(file) {
      if (file.type !== 'image/jpeg' && file.type !== 'image/png') {
        this.$message.error('只支持JPG、PNG格式的图片');
        return false;
      }
      return true;
    },
    handleImageChange(response) {
      this.currentImageUrl = response.url; // 这里的currentImageUrl是你要显示图片的地方
      // 可能还需要更新数据库或状态管理工具中的图片信息
    },
  },
};