前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >el_upload上传多张图片以及删除回显问题

el_upload上传多张图片以及删除回显问题

原创
作者头像
安德玛
发布2022-03-08 10:59:06
3.8K0
发布2022-03-08 10:59:06
举报
文章被收录于专栏:Cordova封装H5 APP
业务场景

需要在upload的时候上传多张图片并且能够随时删除其中任意的一张图片,el_upload组件确实有很大的问题,封装的东西底层文档也写的不清不楚的,所以直接自己实现把,别指望官方的那个鸡肋了

效果图
2022-03-08_105713.png
2022-03-08_105713.png
实现步骤
代码语言:javascript
复制
<el-form-item label="产品图" prop="imgurls">
          <el-upload
            class="avatar-uploader"
            action=""
            :limit="3"
            :http-request="getFile"
            :show-file-list="false">
            <i v-if="form.imgurls.length < 3" class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <div v-for="(item, index) in form.imgurls">
            <img v-if="item" :src="item" class="avatar">
            <el-button type="warning" @click="handleRemove(index)">删除</el-button>
          </div>
        </el-form-item>

删除按钮我们需要将imgurls数组中选中删除的图片直接删除代码如下

代码语言:javascript
复制
handleRemove(index) {
        this.form.imgurls.splice(index, 1)
      },

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 业务场景
  • 效果图
  • 实现步骤
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档