elementui的Upload组件实现图片上传回显功能

在使用Element UI的Upload组件实现图片回显功能时，你需要将已上传的图片URL数组传递给组件，并使用on-preview属性来定义一个方法来预览图片。以下是一个简单的例子：

<template>
  <el-upload
    class="upload-demo"
    action="https://jsonplaceholder.typicode.com/posts/"
    list-type="picture-card"
    :on-preview="handlePictureCardPreview"
    :on-remove="handleRemove"
    :file-list="fileList"
    :on-success="handleSuccess"
  >
    <i class="el-icon-plus"></i>
  </el-upload>
  <el-dialog :visible.sync="dialogVisible">
    <img width="100%" :src="dialogImageUrl" alt="">
  </el-dialog>
</template>
 
<script>
export default {
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      fileList: [
        // 这里填充已上传图片的数据，例如：
        // { name: 'food.jpg', url: 'http://example.com/food.jpg' }
      ]
    };
  },
  methods: {
    handleRemove(file, fileList) {
      // 处理移除图片的逻辑
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleSuccess(response, file, fileList) {
      // 处理上传成功的逻辑
      // 例如将返回的图片URL加入到fileList中
    }
  }
};
</script>

在这个例子中，fileList 是已上传图片的数组，每个图片对象至少包含 name 和 url 属性。handlePictureCardPreview 方法会在用户点击已上传的图片时被调用，并通过设置 dialogImageUrl 和 dialogVisible 来显示图片。handleSuccess 方法用于处理新图片上传成功后的逻辑，通常是将新图片的URL加入到 fileList 中。