这个功能可以使用 Element UI 的 el-upload
组件来实现。el-upload
组件是一个文件上传组件,支持文件的选择、拖拽、进度条显示等功能。你可以在官网的文档中查看更多信息和用法示例。下面是一个简单的示例代码:
<template>
<el-upload
class="upload-demo"
action="/upload"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
:file-list="fileList"
multiple
:limit="3"
:on-exceed="handleExceed"
:auto-upload="false"
list-type="picture-card">
<i class="el-icon-plus"></i>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
</template>
<script>
export default {
data() {
return {
fileList: [
{
name: 'food.jpg',
url: 'https://www.example.com/food.jpg'
},
{
name: 'drink.jpg',
url: 'https://www.example.com/drink.jpg'
}
]
};
},
methods: {
handlePreview(file) {
console.log('handle preview', file);
},
handleRemove(file, fileList) {
console.log('handle remove', file, fileList);
},
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${file.name}?`);
},
handleExceed(files, fileList) {
this.$message.warning(`只能上传 ${this.limit} 个文件哦!`);
}
}
};
</script>
这里用到的是 el-upload
组件的 list-type="picture-card"
属性,表示以图片卡片的形式展示上传的文件。你可以根据自己的需求来设置其他属性。