el-upload多张图片回显
时间: 2023-06-28 10:05:21 浏览: 120
要实现el-upload多张图片回显,你可以通过以下步骤来完成:
1. 在el-upload组件中设置multiple属性,允许用户选择多张图片。
2. 通过el-upload组件的change事件监听用户选择的图片,并将图片存储到一个数组中。
3. 在el-upload组件的成功回调函数中,将上传成功的图片地址存储到一个数组中。
4. 在页面中使用v-for指令遍历存储图片地址的数组,将每张图片以img标签的形式展示出来。
以下是一个示例代码:
```
<template>
<div>
<el-upload
class="upload-demo"
action="/upload"
:multiple="true"
:on-change="handleChange"
:on-success="handleSuccess">
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
<div v-for="(item, index) in imageUrlList" :key="index">
<img :src="item" style="max-width: 200px; max-height: 200px;">
</div>
</div>
</template>
<script>
export default {
data() {
return {
fileList: [],
imageUrlList: []
};
},
methods: {
handleChange(file, fileList) {
this.fileList = fileList;
},
handleSuccess(response, file, fileList) {
this.imageUrlList.push(response.url);
}
}
};
</script>
```
在上述代码中,el-upload组件的multiple属性被设置为true,change事件被绑定到handleChange方法上,成功回调函数被绑定到handleSuccess方法上。图片地址被存储在imageUrlList数组中,最终通过v-for指令遍历展示出来。
阅读全文
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)