el-upload自定义文件列表

在使用 Element UI 的 el-upload 组件时，可以通过 file-list 属性来自定义文件列表。你可以控制文件列表的显示，包括文件名、状态、进度等。

以下是一个简单的例子，展示如何自定义 el-upload 的文件列表：

<template>
  <el-upload
    class="upload-demo"
    action="https://jsonplaceholder.typicode.com/posts/"
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :file-list="fileList"
    list-type="text">
    <el-button size="small" type="primary">点击上传</el-button>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div>
  </el-upload>
</template>
 
<script>
export default {
  data() {
    return {
      fileList: [
        {
          name: 'food.jpg',
          url: 'http://example.com/food.jpg',
          status: 'success'
        },
        {
          name: 'person.jpg',
          url: 'http://example.com/person.jpg',
          status: 'fail'
        }
      ]
    };
  },
  methods: {
    handlePreview(file) {
      console.log('Preview:', file);
    },
    handleRemove(file, fileList) {
      console.log('Remove:', file, fileList);
    }
  }
};
</script>

在这个例子中，fileList 是一个数组，包含了文件的信息。每个文件对象至少需要 name 和 url 属性，还可以包含 status 属性（取值可以是 success、fail、uploading 等）来表示文件的上传状态。list-type="text" 表示以文本的形式展示文件列表。

handlePreview 和 handleRemove 是事件处理函数，分别用于预览文件和移除文件。

你可以根据自己的需求自定义文件列表的显示，比如添加文件大小、上传进度等信息。