基于elementui开发上传组件，实现文件上传loading列表

以下是一个使用Element UI中的Upload组件实现带有loading状态的文件上传列表的示例代码：

<template>
  <el-upload
    class="upload-list"
    action="https://jsonplaceholder.typicode.com/posts/"
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :before-remove="beforeRemove"
    :on-success="handleSuccess"
    :on-error="handleError"
    :file-list="fileList"
    list-type="text">
    <el-button size="small" type="primary">点击上传</el-button>
  </el-upload>
</template>
 
<script>
export default {
  data() {
    return {
      fileList: [
        {
          name: 'food.jpeg',
          url: 'http://example.com/food.jpeg',
          status: 'success',
        },
        {
          name: 'file.pdf',
          url: 'http://example.com/file.pdf',
          status: 'success',
        },
        {
          name: 'loading.png',
          status: 'uploading',
          percent: 50,
        },
      ],
    };
  },
  methods: {
    handlePreview(file) {
      console.log('Preview:', file);
    },
    handleRemove(file, fileList) {
      console.log('Remove:', file, fileList);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    handleSuccess(response, file, fileList) {
      console.log('Success:', response, file, fileList);
    },
    handleError(err, file, fileList) {
      console.log('Error:', err, file, fileList);
    },
  },
};
</script>
 
<style>
.upload-list .el-upload-list__item-thumbnail {
  object-fit: cover;
}
</style>

在这个例子中，我们定义了一个包含三个文件的fileList数组，其中一个文件的status属性设置为'uploading'，并且有一个percent属性来表示上传的进度。Element UI的Upload组件会根据文件的status来显示不同的状态图标和进度条。此外，你可以通过action属性指定文件上传的服务器地址，并实现before-remove、on-preview、on-remove、on-success和on-error等钩子函数来处理文件的预览、移除、成功上传和上传失败等情况。