关于Element-Ui中el-upload组件自动上传,添加图片时图片会弹一下的问题

摘要:

在使用el-upload组件上传图片时,由于在上传成功后file-list被更新导致图片闪动。问题的关键在于uid的变化。解决方案是在回调函数中保持uid不变,将响应数据的uid设置为原始file的uid,从而避免闪动现象。通过这种方式,可以确保上传文件时不会出现闪烁问题。在这里插入图片描述

原理:

是因为在上传会调时赋予了新的file-list,图片信息是根据uid为标识,uid变了,所以会出现这样的情况,我们只需要修改url即可,所以在给file-list赋值时应该继承之前的uid
在这里插入图片描述
在这里插入图片描述

解决:

只需要在上传成功的回调继承一下uid即可,代码如下:

fileSaveList(response, file, fileList) {
      if (response) {
        if (response.success) {
          let attachmentInfo = response.data
          attachmentInfo.uid = file.uid;
          this.attachmentInfo.push(attachmentInfo);
        } else {
          this.$message.error(response.message);
        }
      }
    },

在这里插入图片描述
上传文件时如果出现闪一下的问题也可以通过以上原理处理一下

如果是多选的话:多选的话就找到指定的那一个uid继承下来就可以了吧

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值