源代码
<template>
<div>
<h2>Select Files</h2>
<Panel style="width:600px">
<ButtonGroup slot="header">
<FileButton
style="width:100px"
accept="image/*"
:multiple="true"
@select="onFileSelect($event)"
>Select Files...</FileButton>
<LinkButton @click="files=[]" style="width:100px">Clear</LinkButton>
</ButtonGroup>
<DataList :data="files" :border="false" style="min-height:100px">
<template slot-scope="{row}">
<div class="fileitem">
<img :src="row.url">
<div class="name">{{row.name}}</div>
<div class="size">{{row.size}}</div>
<LinkButton iconCls="icon-clear" :plain="true" @click="removeFile(row)"></LinkButton>
</div>
</template>
</DataList>
</Panel>
</div>
</template>
<script>
export default {
data() {
return {
files: []
};
},
methods: {
onFileSelect(event) {
event.forEach(file => {
file.url = window.URL.createObjectURL(file);
});
this.files = this.files.concat(event);
},
removeFile(file) {
let index = this.files.indexOf(file);
if (index >= 0) {
this.files = this.files.filter((file, i) => i != index);
}
}
}
};
</script>
<style>
.fileitem {
height: 70px;
padding: 10px;
font-size: 14px;
display: flex;
align-items: center;
}
.fileitem img {
width: 50px;
height: 50px;
}
.fileitem .name {
margin: 0 20px;
flex: 1;
}
.fileitem .size {
margin: 0 20px;
text-align: right;
}
</style>