以下是一个使用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等钩子函数来处理文件的预览、移除、成功上传和上传失败等情况。