el-upload 的 file-list 属性做什么的 如何使用 代码演示

`el-upload` 是 Element UI 提供的一个用于文件上传的功能组件，在 Vue.js 中常用于处理用户选择文件的情况。`file-list` 属性是一个数组，用于存储用户每次上传操作中选择的所有文件信息。

这个属性的作用主要有两点：

1. 显示已上传文件列表：它会显示用户的每一次上传历史，包括文件名、状态（如是否成功上传、进度等）、以及删除按钮等，方便管理和查看已上传的内容。

2. 数据绑定：通过 `v-model` 绑定到数据对象，可以让你的应用程序能够获取到这些文件的信息，并进行进一步的操作，比如根据需要对文件进行处理，或者在前端展示文件预览等。

以下是简单的代码演示：

<template>
  <div>
    <el-upload
      :action="uploadUrl"
      list-type="picture-card" // 设置图片预览样式
      :file-list="fileList"
      ref="upload"
      multiple
      :on-success="handleSuccess"
      :on-error="handleError"
    >
      <el-button slot="trigger">点击上传</el-button>
      <el-button @click="clearFiles">清空上传记录</el-button>
    </el-upload>

    <ul v-if="fileList.length">
      <li v-for="(item, index) in fileList">
        {{ item.fileName }} - {{ item.url }}
        <button @click="removeFile(index)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      uploadUrl: 'your-api-url', // 你的服务器接收文件的URL
      fileList: [], // 存储文件信息的数组
    };
  },
  methods: {
    handleSuccess(response, file) {
      this.fileList.push({
        fileName: file.name,
        url: response.data.url, // 成功上传后的文件URL
        status: 'success',
      });
    },
    handleError(error, file) {
      this.fileList.push({
        fileName: file.name,
        status: 'error',
        message: error.message, // 错误信息
      });
    },
    removeFile(index) {
      this.$refs.upload.removeFile(index);
      this.fileList.splice(index, 1); // 移除数组中的对应项
    },
    clearFiles() {
      this.fileList = [];
    },
  },
};
</script>