Element-UI 上传组件缩略图删除方法

最新推荐文章于 2023-01-09 13:28:33 发布

原创最新推荐文章于 2023-01-09 13:28:33 发布 · 3.9k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #vue

Element 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了ElementUI上传组件的使用方法，重点讲解如何实现图片预览及缩略图的删除功能，并提供了解决死循环问题的方案。

elmentUI上传组件缩略图使用
在组件html中使用如下：
在这里插入图片描述

<el-upload
          ref="pictureUpload"
          list-type="picture-card"
          :action="baseIMGURL"
          :headers="headerObj"
          :on-success="uploadSuccess"
          :on-fail="failUppic"
          limit="1">
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{file}">
              <img
                class="el-upload-list__item-thumbnail"
                :src="file.url" alt=""
              >
              <span class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-preview"
                  @click="handlePictureCardPreview(file)"
                >
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span
                  class="el-upload-list__item-delete"
                  @click="handleRemove(file)"
                >
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
        </el-upload>

我这里有两个事件要处理，预览和删除，预览就很简单了
预览代码如下；
点击预览按钮的时候，下面的dialog展示出来就好了。
在这里插入图片描述
代码如下：
handlePictureCardPreview (file) { this.dialogImageUrl = file.url; this.dialogVisible = true; },
官方文档中，并没有说，怎么删除缩略图
所以，我在网上找到了这个方法

这个方法的确是可以删掉图片，但同时，如果你的upload组件绑定了handleRemove方法的话，就会报错，
在这里插入图片描述
这是由于代码进入死循环，导致 ’堆栈超过了最大值’。
1.重新写一个名字和绑定的事件名不一样就行。
2.也可以删除掉dom上的图片数组，保留你当前使用的方法名，如下：

附上代码
handleRemove (file) { this.$refs.pictureUpload.uploadFiles = [] this.infoFrom.out_img = '' },