elementui upload回显图片

最新推荐文章于 2025-03-28 14:52:56 发布

lazy_guo

最新推荐文章于 2025-03-28 14:52:56 发布

阅读量1.1k

点赞数

分类专栏： vue 文章标签： elementui 前端 javascript

本文链接：https://blog.youkuaiyun.com/lazy_guo/article/details/126127005

版权

vue 专栏收录该内容

2 篇文章

订阅专栏

这篇博客展示了如何利用ElementUI的upload组件在前端实现图片上传，并结合后台返回的数据回显已上传的图片。内容包括：设置上传列表样式、监听upload组件的钩子函数如before-upload、on-success、on-preview和on-remove，以及图片预览和删除功能的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<ul class="zdtimage el-upload-list el-upload-list--picture-card" style="display:inline-block">
<li class="el-upload-list__item" v-for="(item3,index) in uploadFileList" :key="index" v-if="item.imageconfigid === item3.name">
<el-image :src="item3.url" class="zdj_image" ></el-image>








</li>
</ul>
<el-upload :action="uploadURL" list-type="picture-card" :before-upload="handleBeforeUpload"
:on-success="(response, file, fileList) => handleSuccessFile(response, file, fileList, item.imageconfigid)"
:on-preview="handlePreviewFile"
:on-remove="handleRemoveFile"
style="display:inline-block"
>

</el-upload>