el-upload上传回显文件名

对于el-upload组件，可以通过监听change事件来获取上传文件的文件名。在change事件的回调函数中，可以通过event.target.files[0].name来获取文件名。

下面是一个示例代码：

<template>
  <el-upload
    action="/upload"
    :on-change="handleChange"
  >
    <el-button slot="trigger" size="small" type="primary">点击上传</el-button>
  </el-upload>
</template>

<script>
export default {
  methods: {
    handleChange(event) {
      const fileName = event.target.files[0].name;
      console.log(fileName); // 打印上传的文件名
    }
  }
}
</script>

在上述代码中，el-upload组件绑定了一个change事件，当用户选择了文件后，会触发handleChange方法。在handleChange方法中，通过event.target.files[0].name获取到上传文件的文件名，并进行相应的处理（这里只是简单地打印出来）。你可以根据实际需求进行进一步的操作。

相关问题

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 组件中，并可以通过组件提供的相关操作来预览、删除等操作。

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

el-upload 回显

要实现 `el-upload` 组件的文件回显，您需要使用 `file-list` 属性来设置初始文件列表。以下是一个示例代码：

<template>
  <el-upload
    class="upload-demo"
    action="/your-upload-url"
    :file-list="fileList"
    :on-change="handleChange"
    :on-success="handleSuccess"
    :on-error="handleError"
  >
    <el-button size="small" type="primary">点击上传</el-button>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      fileList: [
        // 初始文件列表
        {
          name: 'file1.png',
          url: 'http://example.com/file1.png'
        },
        {
          name: 'file2.jpg',
          url: 'http://example.com/file2.jpg'
        }
      ]
    };
  },
  methods: {
    handleChange(file, fileList) {
      // 文件状态改变时的回调函数，更新文件列表
      this.fileList = fileList;
    },
    handleSuccess(response, file, fileList) {
      // 上传成功的回调函数，更新文件列表
      this.fileList = fileList;
    },
    handleError(error, file, fileList) {
      // 上传失败的回调函数，更新文件列表
      this.fileList = fileList;
    }
  }
};
</script>

在上述示例中，我们通过 `fileList` 数据属性设置了初始文件列表。每个文件对象包含 `name` 和 `url` 属性，用于显示文件名和文件的 URL。当上传文件或删除文件时，`file-list` 属性会自动更新，并触发相应的回调函数。您可以根据需要自定义回调函数的逻辑，以便在文件状态改变时更新文件列表。