el-upload上传多张图片回显
时间: 2023-12-28 07:25:23 浏览: 105
以下是使用el-upload上传多张图片并回显的示例代码:
```html
<template>
<el-upload
class="upload-demo"
action="/upload"
:on-success="handleSuccess"
:multiple="true"
:limit="3"
:file-list="fileList"
list-type="picture-card"
:auto-upload="false"
>
<i class="el-icon-plus"></i>
</el-upload>
</template>
<script>
export default {
data() {
return {
fileList: []
};
},
methods: {
handleSuccess(response, file, fileList) {
// 上传成功后的回调函数
// 在这里可以处理回显逻辑
console.log(response); // 服务器返回的数据
console.log(file); // 当前上传的文件对象
console.log(fileList); // 已上传的文件列表
}
}
};
</script>
```
在上述代码中,我们使用了`el-upload`组件来实现文件上传功能。其中,`action`属性指定了上传文件的接口地址,`on-success`属性指定了上传成功后的回调函数。通过在回调函数中处理回显逻辑,可以实现上传多张图片并进行回显。
阅读全文