<el-upload 修改list识别的key

在El-upload组件中，可以通过更改`list-type`属性的值来修改list识别的key。

`list-type`属性决定了上传文件列表的样式和类型。默认情况下，它的值为`text`，表示以文本形式显示上传的文件列表。但是我们也可以将它的值修改为其他值来实现不同的效果。

要自定义list识别的key，我们可以将`list-type`属性的值设置为`picture-card`。这样会以图片卡片的形式显示上传的文件列表，并且每个文件都有一个删除按钮。这个删除按钮可以用来删除相应的文件，而不是整个列表。

例如，我们可以这样修改El-upload组件的`list-type`属性：

<el-upload
  list-type="picture-card"
  :on-remove="handleRemove"
>
</el-upload>

在这个例子中，我们将list-type属性设置为`picture-card`。同时，我们还绑定了一个`on-remove`事件，该事件会在删除按钮被点击时触发，并调用`handleRemove`方法来处理删除文件的逻辑。

通过这种方式，我们可以轻松地修改El-upload组件识别的key，以符合我们的需求。

相关问题

el-upload上传图片成功后，隐藏继续el-upload组件，只显示已上传的图片

可以通过监听 `on-success` 事件，在事件回调函数中获取上传成功的文件列表，然后将这些文件列表保存到组件的 `file-list` 属性中，最后将 `show-file-list` 属性设置为 `true`，这样组件就会隐藏上传区域，只显示已上传的文件列表。

具体实现代码如下：

<template>
  <div>
    <el-upload
      ref="upload"
      class="upload-demo"
      :action="uploadUrl"
      :on-success="handleSuccess"
      :file-list="fileList"
      :show-file-list="showFileList"
      :auto-upload="false"
      :list-type="'picture'"
      multiple>
      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
      <el-button size="small" type="success" @click="submitUpload">上传到服务器</el-button>
      <el-button size="small" type="warning" @click="clearFiles">清空文件</el-button>
    </el-upload>
    <el-divider></el-divider>
    <div v-if="showFileList">
      <el-image v-for="(file, index) in fileList" :key="index" :src="file.url" style="margin-right: 20px" :fit="fit" :preview-src-list="previewSrcList"></el-image>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      uploadUrl: '/upload',
      fileList: [],
      showFileList: false,
      previewSrcList: [],
      fit: 'cover'
    }
  },
  methods: {
    handleSuccess(response, file, fileList) {
      fileList.forEach(item => {
        this.previewSrcList.push(item.url)
      })
      this.fileList = fileList
      this.showFileList = true
    },
    submitUpload() {
      this.$refs.upload.submit()
    },
    clearFiles() {
      this.fileList = []
      this.showFileList = false
      this.previewSrcList = []
    }
  }
}
</script>

在上面的代码中，我们监听了 `on-success` 事件，并在事件回调函数中获取上传成功的文件列表，然后将这些文件列表保存到 `fileList` 属性中，最后将 `showFileList` 属性设置为 `true`，这样组件就会隐藏上传区域，只显示已上传的文件列表。

同时，我们在显示已上传的文件列表时，通过 `v-for` 指令遍历 `fileList` 数组，使用 `el-image` 组件来显示每个文件的预览图，并通过 `preview-src-list` 属性设置预览图的列表。

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 组件不会展示已上传的文件列表。

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