el-upload 上传单张图片回显

在 el-upload 组件中，可以通过设置 :on-success 属性来监听上传成功事件，从而获取上传成功后的图片地址，然后将该地址绑定到一个 img 标签上，实现图片回显。

具体实现步骤如下：

1. 在 el-upload 组件中设置 :on-success 属性，指定一个回调函数。例如：

<el-upload
  class="upload-demo"
  action="/upload"
  :on-success="handleSuccess">
  <el-button size="small" type="primary">点击上传</el-button>
</el-upload>

2. 在 Vue 实例中定义 handleSuccess 方法，用于处理上传成功后的回调函数。例如：

methods: {
  handleSuccess(response, file, fileList) {
    // response 是上传成功后服务器返回的数据
    // 获取上传成功后的图片地址
    const imgUrl = response.data.url;
    // 将图片地址绑定到 img 标签上
    this.imageUrl = imgUrl;
  },
},

3. 在 Vue 实例中定义一个 imageUrl 变量，用于绑定上传成功后的图片地址。例如：

data() {
  return {
    imageUrl: '',
  };
},

4. 在模板中使用 img 标签来显示上传成功后的图片。例如：

<img :src="imageUrl" />

这样就可以实现 el-upload 组件上传单张图片后的回显了。