el-upload文件回显

### 回答1：
el-upload 文件上传成功后，可以通过设置 `:on-success` 属性来指定上传成功后的回调函数，在回调函数中可以获取到上传成功后的文件信息，例如：

<el-upload
  class="upload-demo"
  action="/upload"
  :on-success="handleSuccess">
  <el-button slot="trigger" type="primary">选取文件</el-button>
  <el-button slot="upload" type="success">上传文件</el-button>
</el-upload>

methods: {
  handleSuccess(response, file, fileList) {
    console.log(response); // 上传成功后服务器返回的响应数据
    console.log(file); // 上传成功的文件对象
    console.log(fileList); // 上传成功的文件列表
  }
}

在 `handleSuccess` 方法中，可以根据上传成功后服务器返回的响应数据对页面进行回显。例如，如果服务器返回的是上传成功后的文件路径，可以将路径保存在组件的 data 中，并在页面中显示。

data() {
  return {
    imageUrl: '' // 保存上传成功后的图片路径
  }
},
methods: {
  handleSuccess(response, file, fileList) {
    this.imageUrl = response.data.url; // 保存图片路径
  }
}

<el-image :src="imageUrl" />

### 回答2：
el-upload 是 Element UI 中的组件，用于上传文件。文件上传后，需要将上传的文件回显给用户。

要实现文件上传的回显，我们需要借助 el-upload 中的 on-success 属性和 fileList 属性。首先，我们在组件的 data 中定义一个 fileList 数组用于存储上传成功的文件列表。

然后，在 el-upload 上设置 on-success 方法，该方法会在文件上传成功后被调用。我们可以在该方法内，将上传成功的文件信息添加到 fileList 数组中，并根据需要对文件进行其他处理，例如显示文件名、文件大小等。

以下是一个简单的示例：

<template>
<div>
<el-upload
class="upload-demo"
action="/upload"
:on-success="handleSuccess"
:file-list="fileList"
>
<el-button>点击上传文件</el-button>
</el-upload>
</div>
</template>

<script>
export default {
data() {
return {
fileList: [] // 存储上传成功的文件列表
};
},
methods: {
handleSuccess(response, file) {
this.fileList.push(file); // 将上传成功的文件信息添加到 fileList 数组中
// 其他处理逻辑，例如显示文件名、文件大小等
}
}
};
</script>

通过以上代码，我们可以实现 el-upload 文件上传后的回显功能。当文件上传成功时，handleSuccess 方法会被调用，将文件信息添加到 fileList 数组中。我们可以根据 fileList 数组的内容，在页面上展示上传的文件信息，如文件名、文件大小等。

### 回答3：
el-upload 是 Element UI 提供的一个文件上传组件，可以用来实现文件上传功能。在文件上传成功后，可以通过设置 `:on-success` 属性来调用上传成功的回调函数，从而实现文件回显。

文件回显的具体实现方式，可以通过在上传成功的回调函数中将上传成功的文件保存到一个变量中。然后，通过绑定这个变量到 el-upload 组件的 `:file-list` 属性，即可实现文件回显的效果。

在实际应用中，可以通过以下步骤来实现文件回显：

1. 创建一个变量来保存上传成功的文件列表，例如 `fileList`。

data() {
  return {
    fileList: [] // 用来保存上传成功的文件列表
  }
}

2. 在 el-upload 组件中，将变量绑定到 `:file-list` 属性。

<el-upload
  :file-list="fileList"
  :on-success="handleUploadSuccess"
>
  <!-- 其他代码 -->
</el-upload>

3. 在上传成功的回调函数 `handleUploadSuccess` 中，将上传成功的文件添加到 `fileList` 中。

methods: {
  handleUploadSuccess(response, file, fileList) {
    // 保存上传成功的文件到 fileList
    this.fileList = fileList;
  }
}

通过以上步骤，就可以实现文件上传成功后的回显功能。当文件上传成功时，文件会显示在 el-upload 组件中，并可以通过组件提供的相关操作来预览、删除等操作。

需要注意的是，以上只是一种实现文件回显的方式，具体实现方式可以根据实际需求进行适当的调整。