el-upload div slot=“file“ slot-scope=“{file}“ 上传与回显同时展示

最新推荐文章于 2024-08-21 08:58:29 发布

星良辰寻

最新推荐文章于 2024-08-21 08:58:29 发布

阅读量6.4k

点赞数

分类专栏： element ui

本文链接：https://blog.csdn.net/josiecici/article/details/117227603

版权

element ui 专栏收录该内容

54 篇文章 4 订阅

订阅专栏

这段代码展示了如何在前端实现图片的显示，根据`file.file_guid_name`和`file.url`来加载图片，并提供了一个删除按钮，通过`removeFileOne(file)`方法进行单个文件移除的操作。该段代码适用于文件上传组件的交互设计。

摘要由CSDN通过智能技术生成

在这里插入图片描述

 <div slot="file" slot-scope="{file}">
              <img v-if="file.file_guid_name" class="el-upload-list__item-thumbnail" :src="imgApi+file.file_guid_name" alt="">
              <img v-show="file.url" class="el-upload-list__item-thumbnail" :src="file.url" alt="">
              <!-- 图片内的操作 -->
              <span class="el-upload-list__item-actions">
                <span class="el-upload-list__item-delete" @click="removeFileOne(file)">
                  <i class="el-icon-delete"></i>
                </span>
              </span>
  </div>

如下为重要代码

              <img v-if="file.file_guid_name" class="el-upload-list__item-thumbnail" :src="imgApi+file.file_guid_name" alt="">
              <img v-show="file.url" class="el-upload-list__item-thumbnail" :src="file.url" alt="">