el-upload 上传多张图片 完整代码
时间: 2023-06-29 22:19:47 浏览: 121
elemetUi 组件--el-upload实现上传Excel文件的实例
5星 · 资源好评率100%
以下是一个基于 Element UI 的 el-upload 组件上传多张图片的完整代码示例:
```html
<template>
<div>
<el-upload
class="upload-demo"
action="your_upload_url"
:on-success="handleSuccess"
:on-remove="handleRemove"
:file-list="fileList"
:auto-upload="false"
:multiple="true"
:limit="3"
list-type="picture-card"
:show-file-list="true"
>
<i class="el-icon-plus"></i>
</el-upload>
</div>
</template>
<script>
export default {
data() {
return {
fileList: []
};
},
methods: {
handleSuccess(response, file, fileList) {
console.log(response);
},
handleRemove(file, fileList) {
console.log(file, fileList);
}
}
};
</script>
<style>
.upload-demo {
display: inline-block;
margin-bottom: 20px;
}
</style>
```
在上面的代码中,我们设置了 `multiple` 属性为 `true`,这样就可以上传多张图片。另外,我们还设置了 `limit` 属性为 `3`,表示最多上传 3 张图片。在 `handleSuccess` 方法中,我们可以拿到上传成功后的响应数据。在 `handleRemove` 方法中,我们可以获取被移除的文件信息。
阅读全文