show-file-list属性

`show-file-list` 是一个 HTML 元素属性，用于控制在浏览器中显示文件列表的方式。当该属性设置为 true 时，浏览器将显示一个可交互的文件列表，其中包含用户可以选择并打开的文件。这个属性通常用于 `<input type="file">` 元素上，以便用户选择要上传的文件。

例如，下面的 HTML 代码创建了一个带有 `show-file-list` 属性的文件输入框：

<input type="file" show-file-list="true">

当用户单击这个输入框并选择一个或多个文件后，浏览器将显示一个文件列表，用户可以使用该列表打开或删除所选文件。注意，`show-file-list` 属性是非标准属性，不是 HTML 规范中定义的属性，因此不是所有浏览器都支持它。

相关问题

有:show-file-list="false"这个属性之后就都不展示了啊

你是对的，如果将 `show-file-list` 属性设置为 `false`，将会隐藏整个文件列表，包括准备状态的文件。如果你只想隐藏已上传的文件列表，可以使用 `list-type` 属性，将其设置为 `'picture'` 或者 `'picture-card'`，这样文件列表将会以图片形式展示。示例代码如下：

<el-upload
  action="/your/upload/url"
  list-type="picture-card"
  :on-success="handleSuccess"
  :on-error="handleError"
>
  <i class="el-icon-plus"></i>
</el-upload>

如果你仍然想在文件列表中显示准备状态的文件，可以使用默认的列表形式，并设置 `file-list` 属性，将其绑定到一个数组上：

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

然后在组件中定义 `fileList` 数组，并在上传成功的回调函数中将上传成功的文件信息添加到 `fileList` 数组中。这样，准备状态的文件也将显示在文件列表中。

show-file-list赋值为false，通过slot进行el-upload的图片回显

您好，针对您的问题，我大概理解您的意思是想在 el-upload 组件上传图片成功之后，通过 slot 的方式将图片回显到页面上，并且想要控制是否展示已上传的图片列表，是吗？

如果是这样的话，可以按照以下步骤进行操作：

1. 将 el-upload 的 show-file-list 属性设置为 false，即不展示已上传的文件列表。

2. 在 el-upload 的 onSuccess 事件中，获取到上传成功后的文件地址，并将其赋值给父组件的 data 属性中。

3. 在 el-upload 的 slot 中，通过 v-for 循环遍历父组件 data 中的图片地址，将每个图片地址渲染为一个 img 标签，从而实现图片回显。

下面是一个简单的示例代码，供您参考：

<template>
  <el-upload
    :show-file-list="false"
    :on-success="handleSuccess"
  >
    <slot>
      <img v-for="(url, index) in uploadedImages" :key="index" :src="url" />
    </slot>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      uploadedImages: []
    }
  },
  methods: {
    handleSuccess(response) {
      // 上传成功后，将文件地址保存到 uploadedImages 中
      this.uploadedImages.push(response.url)
    }
  }
}
</script>

以上代码中，el-upload 组件的 slot 中通过 v-for 循环遍历 uploadedImages 数组中的图片地址，并将每个地址渲染为一个 img 标签。在 handleSuccess 方法中，获取到上传成功后的文件地址，并将其 push 到 uploadedImages 数组中，从而实现了图片回显的功能。同时，由于 show-file-list 属性被设置为 false，因此 el-upload 组件不会展示已上传的文件列表。

希望以上回答能够帮到您，如有疑问请随时追问。