elementui upload回显图片

最新推荐文章于 2025-09-10 15:22:28 发布

原创最新推荐文章于 2025-09-10 15:22:28 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #前端 #javascript

vue 专栏收录该内容

2 篇文章

订阅专栏

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

部署运行你感兴趣的模型镜像

<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>

您可能感兴趣的与本文相关的镜像

Stable-Diffusion-3.5

图片生成

Stable-Diffusion

Stable Diffusion 3.5 (SD 3.5) 是由 Stability AI 推出的新一代文本到图像生成模型，相比 3.0 版本，它提升了图像质量、运行速度和硬件效率