el-upload编辑时候回显照片

el-upload是Element UI中的一个组件，用于文件上传功能。在编辑场景中，我们通常需要先展示当前可编辑的信息，包括已经上传的照片，然后再允许用户进行更新或替换。要实现照片的回显，可以在el-upload组件中使用`list-type="picture"`来展示当前已上传的照片列表，并通过`on-preview`和`on-remove`属性绑定预览和删除操作。

一般来说，实现照片回显的步骤包括：

1. 在页面加载时，从服务器获取到当前对象的照片数据。
2. 将获取到的照片数据展示在el-upload组件中。
3. 通过el-upload组件的`default-file-list`属性设置默认的文件列表。

具体实现示例代码如下：

<template>
  <el-upload
    class="upload-demo"
    action="服务器上传接口"
    list-type="picture"
    :file-list="fileList"
    on-preview="handlePictureCardPreview"
    on-remove="handleRemove"
  >
    <i class="el-icon-plus"></i>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      fileList: [] // 这里用来存放已上传的照片列表
    };
  },
  methods: {
    // 载入页面时获取照片数据
    fetchPhotoData() {
      // 假设这是从服务器获取照片数据的函数
      getServerPhotos().then((response) => {
        this.fileList = response.data;
      });
    },
    // 预览照片的方法
    handlePictureCardPreview(file) {
      // 实现预览逻辑，例如使用element-ui的Dialog组件展示大图等
    },
    // 删除照片的方法
    handleRemove(file) {
      // 实现删除逻辑，例如更新服务器上的数据并重新获取照片列表
    }
  },
  mounted() {
    // 在组件挂载后获取照片数据
    this.fetchPhotoData();
  }
};
</script>

以上代码中，`fileList`是绑定到el-upload组件的`file-list`属性的数据源，通过`fetchPhotoData`方法在组件挂载后调用，从服务器获取已上传的照片列表，并将其赋值给`fileList`。这样在页面加载完成后，el-upload组件就能显示出照片回显的效果。