el-upload组件的文件回显功能和添加文件到elupload组件

在使用 el-upload 组件时，如果需要实现文件的回显功能，即将已上传的文件列表显示出来，并允许用户将文件添加到该组件，可以通过以下步骤实现：

1. 使用 el-upload 组件，并将其 v-model 绑定到一个数组，该数组将存储已上传的文件列表。
2. 将已上传的文件对象添加到绑定的数组中。

以下是一个简单的例子：

<template>
  <div>
    <!-- el-upload 组件 -->
    <el-upload
      action="https://jsonplaceholder.typicode.com/posts/"
      :on-success="handleSuccess"
      :file-list="fileList"
      list-type="text">
      <el-button size="small" type="primary">点击上传</el-button>
    </el-upload>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      // 已上传文件列表
      fileList: [
        // 这里可以是从服务器获取的已上传文件列表
        { name: '文件1.jpg', url: 'http://example.com/file1.jpg' },
        { name: '文件2.jpg', url: 'http://example.com/file2.jpg' }
      ]
    };
  },
  methods: {
    // 文件上传成功的回调
    handleSuccess(response, file, fileList) {
      // 将上传成功的文件添加到 fileList 中
      this.fileList.push(file);
    }
  }
};
</script>

在这个例子中，:file-list 属性绑定了 fileList 数组，这个数组包含了已上传的文件信息。当文件上传成功后，handleSuccess 方法会被调用，并将上传的文件对象添加到 fileList 数组中，从而实现文件的回显。

请注意，action 属性应设置为文件上传的服务器地址，而 on-success 应设置为处理上传成功的方法。实际应用中，文件列表应从服务器获取，并且在上传文件时应有相应的服务器端处理逻辑。