vue+element列表中每一项使用一次el-upload后,单独删除该项的数据时,列表中所有的el-upload的图片被清空

el-upload组件代码:


<template>

  <el-upload
    class="avatar-uploader"
    :class="{avatarUploaderMimi:size == 'mini', disabled:fileList.length >= (imageCount?imageCount:1)}"
    :action="uploadUrl"
    :file-list="fileList"
    :ref="refUpload"
    name="file"
    list-type="picture-card"
    :on-change="handleChange"
    :on-remove="handleRemove">
    <div class="avatar-uploader-center">
      <i class="el-icon-plus avatar-uploader-icon"></i>

      <div class="el-upload__tip" v-show="text">{{text}}</div>
    </div>

  </el-upload>

</template> 

<script>

import Config from '@/common/js/config';

/**
 * @param imageUrl : [{url:''}]
 * @param imageCount : 上传数量
 * @param text
 * @returns arr
 */

export default {
  name: 'uploadImg',

  props: ['imageUrl', 'imageCount', 'text' , 'size','refUpload'],

  data() {
    return {
      uploadUrl:'',
      fileList:[],
    };
  },

  created() {
    this.uploadUrl = Config.uploadUrl;
    if(this.imageUrl == '' || this.imageUrl == undefined || this.imageUrl == null){
      this.fileList = [];
    }
    if(this.imageUrl && this.imageUrl.length > 0){
      if(this.imageUrl[0].url == '' || this.imageUrl[0].url == null || this.imageUrl[0].url == undefined){
        this.fileList = [];
      }else {
        this.fileList = this.imageUrl;
      }
    }

  },

  methods: {
    imgRemove(){
      console.log(this.$refs);
      this.$refs[this.refUpload].clearFiles();
    },
    handleChange(file, fileList) {
      this.fileList = fileList;
    },

    handleRemove(file, fileList) {
      this.fileList = fileList;
    },

    beforeAvatarUpload(file) {

      const isJPEG = file.type === 'image/jpeg';
      const isJPG = file.type === 'image/jpg';
      const isPNG = file.type === 'image/png';
      const isGIF = file.type === 'image/gif';
      const isLt2M = file.size / 1024  < 512;

      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过512k!');
      }
       return (isJPG || isJPEG || isPNG || isGIF) && isLt2M;
    },


    // 返回图片在服务器的URL
    getUploadImage(){
      let imgUrl;
      this.fileList.map(item => {
        if(item.response){
          imgUrl = item.response.data;
        }else {
          imgUrl = item.url;
        }
      });
      return imgUrl;
    },


  }

}

</script>

<style>

  .avatar-uploader .el-upload {
    line-height: inherit;
  }

  .avatar-uploader .el-icon-close-tip{
    opacity: 0;
  }

  .avatar-uploader .el-upload,
  .avatar-uploader .el-upload-list__item{
    width: 100px !important;;
    height: 100px !important;;
  }

  .avatarUploaderMimi .el-upload,
  .avatarUploaderMimi .el-upload-list__item{
    width: 50px !important;;
    height: 50px !important;;
  }


  .avatar-uploader.disabled .el-upload--picture-card {
    display: none;
  }

  .avatar-uploader-center{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 100%;
  }

</style>


父组件调用代码

<div class="input-wrap" v-for="(item,index) in skuList" :key="RndNum(8)">
                  <upload-img ref="skuImgList" :ref-upload="'refUpload' + RndNum(4)" :image-count="uploadCount" size="mini" class="sku-img"></upload-img>

<div class="input-wrap">
<span style="color: blue;cursor: pointer;" @click="removeSku(item,index)">删除</span>
</div>
</div>


script=============
removeSku(item, index) {
        this.$refs.skuImgList[index].imgRemove();
        this.skuList.splice(index, 1);
      },

删除前===========================

删除前

删除后============================

删除后

我尝试过给子组件加v-if显示隐藏,不行,也尝试过把el-upload拿出来直接用然后把列表内每一项加一个fileList来使用也不行,实在是搞不懂了。
求大神指教!

0
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
vue的Element组件上传文件el-upload上传成功后清空
&amp;lt;el-upload action=&quot;#&quot; ref=&quot;upload&quot; list-type=&quot;picture&quot; :show-file-list=&quot;true&quot; :limit=&quot;1&quot; :http-request=&quot;handleUpload&quot;&amp;gt; &amp;lt;el-button size=&quot;small&quot; type=&quot;pr
element-ui组件的el-upload上传图片后清空图片
PS→无奈:勇敢的人总在寂寥的夜里不动声色的强大 版权声明:本文为博主原创文章,未经博主允许不得转载。 今天发现一个问题,在使用element-ui组件,el-dialog弹窗中用el-upload上传图片之后,再次打开弹窗仍然会显示上次上传的图片,想要清空原来上传的图片该怎么办呢? 仅需两步: 1.只需要在组件上绑定ref。 2.在你需要删除图片的地方调用this.$refs.up...
element-ui 上传图片后清空图片显示
使用element-ui,使用el-upload上传图片,上传图片后再次打开还是会有原来的图片,想要清空原来上传的图片,只需要在组件上绑定ref,在提交成功后的方法里调用this.$refs.upload.clearFiles();就可以清除原来上传的文件。具体如下:&amp;lt;el-upload ref='upload' class=&quot;upload-demo&quot; action=&quot;https...
VUE使用element-ui的upload组件自定义文件列表
emmm我又来了๑乛◡乛๑ 饿了么上传组件的文件列表filelist有个删除功能,我看源代码它是直接删除,并不会提示。issue上也有不少开发者提过这个问题,开发组还是建议自己写(想偷懒都不行……)除了复写文件列表外,还加了一个上传状态的显示。 先上效果图: 悬浮时的效果: 上传时的效果: 以下测试在vue(v2.5) + vue-rou...
Vue使用Element-ui 将文件、图片上传七牛云,实现对已上传成功的文件进行删除操作
最近在使用vue将文件和图片上传到七牛云上,并对已上传成功的文件在列表进行删除操作,以此来记录一下在这期间的具体步骤以及踩过的坑。。。。。 我对前端不太熟,而我的上传功能需要设置在第二层页面上,但在对第二层页面操作的时候,js页面死活引入不进去,所以在获取七牛云上传token和文件删除时,都从后台调用方法 七牛云文件上传具体处理步骤: 1、在文件上传之前获取token,即七牛云上传权限 2...
element-ui 的upload组件,before-upload验证不通过后触发了on-remove方法的解决办法
1、图示 rt,类似于这样的上传 2、HTML &amp;lt;h3&amp;gt;套图&amp;lt;/h3&amp;gt; &amp;lt;el-upload :before-upload=&quot;beforeAvatarUpload&quot; style=&quot;margin-left:75px;&quot; :file-list=&quot;fileList&quot; :headers=&quot;headers&quot; :action=&quot;uploadUrl&
Vue Element Upload组件自定义上传行为及值回填
问题 由于项目使用element-ui,然后upload默认上传方式不支持我们现有接口。参照了一下官方API及相关博客,解决了我现有问题。 解决方式 自定义上传:upload组件提供了一个http-request属性,官方给的描述是:覆盖默认的上传行为,可以自定义上传的实现 值的回填:upload组件提供了一个file-list属性,描述:上传的文件列表 具体代码实现 自定义上传行为...
vue项目中结合element ui解决连续上传多张图片及图片编辑问题
编码都是以需求为导向的,所以编码前一定要弄清楚需要的结果是什么,然后再开始编码。 现在简单的说下需求:如下图所示,点击蓝色的“+”按钮,可以连续生成多个图片上传框,每个图片上传框都是单独上传图片,编辑互不影响。 element ui: &amp;lt;div class=&quot;form-right&quot;&amp;gt; &amp;lt;div class=&quot;right_b...
完美解决Vue+element-ui 中upload组件使用多个时无法绑定对应的元素
完美解决Vue+element-ui 中upload组件使用多个时无法绑定对应的元素 项目时间赶,未来得及封装组件,莫怪莫怪! 我们在一个列表中分别都需要有upload组件的时候也就涉及到了多个upload同时存在;因为一般可以在success回调中拿到上传成功的图片已经成功的response,多个也可以,这个没毛病; 文档如下: on-success 文件上传成功时的钩子 function(...
Element-ui实现合并多图上传(一次请求多张图片)
前言 工作中碰到需要多图上传,在使用element-ui解决过程中碰到一些问题,在这里分享给大家。 环境: Springboot+Vue+Element-ui 正文 这次上传使用的是Elemet-ui的uoload上传组件,组件预留的钩子回调还是比较充足的。 实现多图上传主要用到以下两个属性: Elemet-ui是自带多图上传的,但是...
vue element upload实现图片本地预览
vue 使用element实现本地预览 最主要的是将图片路径转换为base64 HTML &amp;amp;amp;lt;el-upload class=&amp;amp;quot;avatar-uploader&amp;amp;quot; action=&amp;amp;quot;123&amp;amp;quot; //这个路径不重要,可以随便写 :show-file-list=&amp;amp;quot;false&amp;amp;quot; :on-success=&amp;amp;q
【已解决】VUE-element框架 上传组件,:before-upload函数里 取消本次上传
我在上传组件绑定:before-upload,并判断文件类型、大小。格式不正确时如何取消本次上传?官方文档写的是用abort方法。我调用了半天,查了mdn还是很迷茫。最后查到npm的文档,发现这一行:before-upload可选参数, 上传文件之前的钩子,参数为上传的文件,若返回 false 或者 Promise 则停止上传。原来简单的return false;就可以了!p.s:这里我想吐槽下,...
element 的el-upload的change事件如何传递当前索引
on-change 文件状态改变时的钩子,添加文件、上传成功和上传失败时都会被调用 function(file, fileList) 公司有个项目需求需要在一个列表中分别上传图片,饿了么的方法不支持传递index,可以这样传递: :on-change="(file,fileList)=&gt;{return changeFile(file,fileList, scope.$...
vue+element上传图片并显示预览图
html代码:  &amp;lt;el-upload class=&quot;avatar-uploader aUpload&quot; action=&quot;&quot;                                      :show-file-list=&quot;false&quot;                                      :on-success=&quot;handleAvatarSuccess&quot;   ...
element-ui Upload 上传文件再编辑显示的两种方式
1.直接将文件名以文本的方式展现 后台返回的链接以逗号的形式分隔,初始化定义一个数组:files: [] 页面结构: &amp;amp;amp;amp;lt;el-upload class=&amp;amp;amp;quot;upload-demo&amp;amp;amp;quot; ref=&amp;amp;amp;quot;upload&amp;amp;amp;quot; :action=&amp;amp;amp;quot;actionPath&amp;amp;amp;quot;
关于element-ui中上传图片样式自定义的坑
我们在项目中可能遇到上传图片的问题,但是element-ui中提供的上传图片样式不满足我们的需求,我们在实现的时候可能会遇到坑。以我在项目中上传图片为例,如下图所示:像这种,在element-ui中是没有这种样式的,所以我们只能自己写,我们先看下代码&amp;lt;el-upload ref=&quot;foreignPersonUploadItem&quot; class=&quot;avatar-uploa...
基于vue-cli中基于element-ui的Upload 上传文件,异步上传
做项目时遇到上传excel文件到后台,项目使用的是elementUI组件,直接使用element的Upload上传,但是需求是需要用户选择完文件,并且输入文件描述,然后一起上传到后台,类似于form表单提交   (1).vue html  &amp;lt;div class=&quot;user-search-body&quot;&amp;gt; &amp;lt;el-form inline ...
el-upload上传组件 - 仅上传一个文件或图片,且隐藏掉选择文件框(或+号)
  如上图所示,需要解决的问题就如图所示: 解决方案: 1. 定位需要隐藏的虚框element; 2. 设置虚框的style。 具体代码:(vue.js实现方案) 1. /////隐藏定位的目标element let upload_div = $('.avatar-uploader-cover')[0].childNodes[0]; // this.removeClassName...
vue+elementui el-upload上传文件携带参数
&lt;el-upload ref="upload" style="display:inline;margin-left:10px;" action="url" :auto-upload="false" :multip...
使用el-upload,实现列表遍历添加图片
&lt;el-table-column label="图片" align="center"&gt; &lt;template slot-scope="scope2"&gt; &lt;el-upload :show-file-list="false" :headers="headers" :data="{pathCode: 4}" :on-success="(value...
VUE使用element UI的upload组件时ios上传图片旋转90度问题
vue使用Upload组件上传图片 &amp;lt;Upload class=&quot;upload&quot; :show-file-list=&quot;false&quot; :action=&quot;getUploadUrl&quot; :before-upload=&quot;beforeUpLoad&quot; ...
vue+elementUI(el-upload)图片压缩,默认同比例压缩
这个需求针对用户上传手机拍摄照片等不便修改图片大小的情况,我们允许上传10M以内的图片由前端对图片进行压缩再传给后台存储,结合elementUI的el-upload组件实现图片上传功能(简单来说就是用户是老大) 1、提取出压缩方法,放在公共方法.js文件里 /** 图片压缩,默认同比例压缩  *  @param {Object} fileObj  *  图片对象  *  回调函数有一个参...
Element UI Upload 组件 设置只允许上传单张图片的操作
首先附一个官方upload的地址 http://element-cn.eleme.io/#/zh-CN/component/upload 其中有上传多张和不同样式列表的例子,只是在【用户上传头像】这个例子中,在下并没有成功的使用。 会出现显示不出已上传的图片无法显示缩略图,无法调整缩略图的位置。 所以我不想深究,直接用【照片墙】这个例子往上怼。这个例子上上传多张的,因
elementUI中图片上传upload组件,上传图片数据到后台
结构: &amp;lt;el-upload :action=&quot;api.base+api.uploadotherpic&quot; list-type=&quot;picture-card&quot; :file-list=&quot;fileList&quot; with-credentials :before-upload=&quot;befo...
element upload 钩子函数的坑
因为需求需要我讲element 的upload组件放在了el-dialog中,但是坑就在这 看图片的上方是不是可以看到上传成功四个打字,但是它并不是真的在上传成功后显示出来的,只要页面加载成功,打开和关闭el-dialog都会出来这四个大字,来看代码 这是upload部分设置代码: (请忽略方法名称的不规范,这里只做个演示) on-success调用的方法 success () { thi...
在vue项目中使用element-ui的Upload上传组件
<el-upload v-else class='ensure ensureButt' :action="importFileUrl" :data="upLoadData" name="importfile" :onErr
element upload上传单张图片,效果同多图
效果如图: &amp;lt;template&amp;gt; &amp;lt;div class=&quot;flex-img&quot;&amp;gt; &amp;lt;div class=&quot;el-upload-list el-upload-list--picture-card&quot; v-show=&quot;hideShow&quot;&amp;gt; &amp;lt;div class=&quot;el-upload-list_
vue学习——element-ui的upload功能图片究竟上传到哪了?
&amp;lt;el-upload action=&quot;&quot; accept=&quot;image/jpeg,image/png&quot; :on-change=&quot;onUploadChange&quot; :auto-upload=&quot;false&quot; :show-file-list=&quot;false&quot;&amp;gt; &amp;lt;el-button slot=&quot;trigger&quot; size=&quot
element upload 后台如何接数据---记录
本人小白一个,在项目中使用element upload踩了好多坑。项目前台为vue+element,后台为Springboot,图片存储在七牛云上。采坑原因对底层东西不理解,对项目所使用的框架不熟悉。 问题描述: element upload传输的数据格式:request payload(刚刚看到都不明白这是一种数据格式) 在后台使用了各种方法接数据都不行,后面直接从HttpSe...
element-ui upload 照片墙 照片回显
&lt;el-form-item label="海报" prop="invitationPosterUrl"&gt; &lt;el-upload :file-list="fileList" //这里要设置!!! action="/admin/upload" list-type="pic...
vue element ui中upload组件如何在form表单中校验
采用element ui,一个表单中有上传组件upload,然后写了校验规则,当不上传图片时,会提示请上传图片,当上传图片后,提示不会消失代码如下:&amp;lt;el-form-item label=&quot;图标&quot; prop=&quot;logo&quot; required&amp;gt; &amp;lt;el-upload class=&quot;avatar-u...
关于vue中element 的upload组件发送请求给后端
1.用到了before-upload属性, 用于在上传文件前的校验,并且发送请求给后端,传输格式进行文件流传输 什么都不用设置,action属性随便设置,不能为空即可! 在before-upload属性的方法中的代码如下: var _this = this; debugger; // var files=file.target.files[0]; de...
vue2.0 使用element-ui里的upload组件实现多图上传。采用FORMDATA的方式上传。
这边博文主要介绍的是使用element-ui的upload上传组件实现自定义多图上传的方式。 element-ui的upload上传组件,如果是多图上传,实际上在请求中为单个文件上传,只是提交方法中自循环,直至上传文件列表为空为止。 不多说上代码: HTML: 点击上传 只能上传jpg/png文件,且不超过500kb 提交到服务器 JS: up
js文件上传,elementUi el-upload文件上传
js文件上传,elementUi el-upload文件上传
关于Element上传图片组件el-upload的使用以及校验
这种写法在多数情况下均可使用 &amp;lt;el-upload class=&quot;avatar-uploader&quot; action=&quot;/api/upload/ueditorUpload&quot; :on-success=&quot;uploadSuccess&quot; :on-error=&quot;uploadError&quot; :show-file-list=&quot;false&quot; :before-upload=&quot;beforeAvat
vue中使用elementUI组件的Upload 上传图片
1.访问Element官网【组件–Upload上传】 &amp;amp;amp;amp;amp;amp;amp;lt;el-upload action=&amp;amp;amp;amp;amp;amp;quot;https://jsonplaceholder.typicode.com/posts/&amp;amp;amp;amp;amp;amp;quot; list-type=&amp;amp;amp;amp;amp;amp;quot;picture-card&amp;amp;amp;amp;am
记录vue组件el-upload踩过的几个坑
最近在用el-upload这个组件,但发现有两个坑,主要是上传下载的时候。 附件上传 附件上传需要调用后台的接口,而这个接口需要传token,这个具体要怎么做呢. 使用el-upload的header属性 示例如下: &amp;lt;el-upload :before-upload=&quot;handleBeforeUpl...
onprogress无法触发解决
在上传文件时要做进度显示 需要用到xhr.upload.onprogress事件,此时如果用到mock.js模拟数据的话 则无法触发onprogress事件 原因: mockjs会重新声明一个XMLHttpRequest导致el-upload的progress失效...
vue 使用element Upload头像上传
这里使用element Upload 用户头像上传 HTML部分 &amp;amp;amp;amp;lt;el-upload class=“avatar-uploader” action=&amp;amp;amp;quot; 123&amp;amp;amp;quot; // 这个地址不是必须的。可随便写 :show-file-list=“false” :on-success=“handleAvatarSuccess” :before-upload=“beforeAvatarUpload”&a
用Vue&ElementUI Upload组件实现自定义顺序上传
产品要求: 最多选择100个文件 每张图最大2M 需要给出每张图上传的结果:成功从列表中删除,失败提示网络错误,大于2m也需要提示 支持重试 遇到的问题: upload组件不支持多文件顺序上传,如果一次性上传100张图,压力有点大 不支持顺序上传的原因,在elementui的源码中,手动调用submit方法时,会过滤status为ready的file,然后开始上传过程,上传过程异步,就会...