elementui上传多张图片可以点击预览 删除
时间: 2023-09-12 20:05:09 浏览: 110
是的,ElementUI提供了el-upload组件来实现上传多张图片并支持预览和删除的功能。你可以通过设置el-upload组件的属性来实现这些功能,具体步骤如下:
1. 在Vue组件中引入el-upload组件
```javascript
<template>
<el-upload
class="upload-demo"
action="your-upload-api"
:on-preview="handlePreview"
:on-remove="handleRemove"
:file-list="fileList"
multiple
list-type="picture-card">
<!--上传按钮-->
<i class="el-icon-plus"></i>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
</template>
<script>
export default {
data() {
return {
fileList: [], // 文件列表
};
},
methods: {
// 预览图片
handlePreview(file) {
console.log(file);
},
// 删除图片
handleRemove(file, fileList) {
console.log(file, fileList);
},
},
};
</script>
```
2. 设置el-upload组件的属性
- `action`: 文件上传的API地址
- `on-preview`: 预览图片的回调函数
- `on-remove`: 删除图片的回调函数
- `file-list`: 已上传的图片列表
- `multiple`: 是否支持多选
- `list-type`: 列表显示方式,这里设置成`picture-card`以卡片形式显示
3. 实现预览和删除的回调函数
`handlePreview`函数接收一个参数`file`,表示当前预览的文件对象,你可以通过调用浏览器内置的图片预览方法来实现图片预览功能。
`handleRemove`函数接收两个参数`file`和`fileList`,分别表示当前删除的文件对象和文件列表。你可以在这个函数里面通过操作`fileList`中的元素来实现删除图片的功能。
以上就是实现ElementUI上传多张图片并支持预览和删除的方法。
阅读全文