el-upload 上传多张图片并且回显 完整代码
时间: 2023-06-29 15:19:50 浏览: 247
以下是一个使用 Element UI 的 `el-upload` 组件上传多张图片并且回显的完整代码示例:
```html
<template>
<div>
<el-upload
class="upload-demo"
action="/your/upload/url"
:multiple="true"
:on-success="handleSuccess"
:show-file-list="false"
:on-change="handleChange"
>
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
<div v-if="imageUrlList.length">
<h3>上传的图片:</h3>
<div v-for="(url, index) in imageUrlList" :key="index">
<img :src="url" alt="uploaded image" style="max-width: 100px; max-height: 100px; margin-right: 10px;">
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
imageUrlList: [],
};
},
methods: {
handleSuccess(response, file, fileList) {
if (response && response.code === 200) {
this.imageUrlList.push(response.data.url);
}
},
handleChange(file, fileList) {
// do something when file selection changes
},
},
};
</script>
```
请注意,您需要将 `action` 属性中的 `/your/upload/url` 替换为您自己的上传接口地址。在上传成功后,会将图片的 URL 添加到 `imageUrlList` 中,并在页面上显示出来。
阅读全文