昨天修完了一个上传组件删除时，图片删掉了，但是地址仍然在的bug，今天测试告诉我bug没休掉，what ！，昨天修完之后我自测了一下，OK的好吗，但是测试给我演示了一下，问题仍然存在！！！我看了一下调试窗口，报错：id 不存在？这个id是写在

handleRemove里面的，原本是file里面的response里面的id,但是现状id不存在，我把file打印出来，如下图：

 

我更懵逼了，昨天的file结构怎么和今天的不一样啊，我明明记得昨天的file里面有response的？？我仔细想了一下，昨天改完bug之后，我好像加了点东西，为了点击关闭按钮之后能清空图片的，我在upload组建上加了两个属性：

一个ref,和一个:file-list,难道和这两个有关系嘛？我把这俩值注销掉之后，再次打印handleRemove里面的file,数据结构如下：

这才是我昨天看到数据嘛？但是why?是ref影响的，还是file-list影响的？经过测试发现只要把file-list注销掉，file里面就是有response的，原因还是在file-list身上，:file-list='imgList',拿这个imglist是什么东西呢？

在handleSuccess里面可以看到，imglist里面是由response构成的数组，这下我就明白了，删除时的file是从file-list里面拿值，如果file-list里面是response,那么删除时的file就等于response,如果file-lis里面是file，那么删除时的file和上传成功时的file是一样的

element-ui upload组建上传 file-list踩过的坑的更多相关文章

  1. element ui实现手动上传文件，且只能上传单个文件，并能覆盖上传。

    element ui提供了成熟的组件场景,但实际工作中难免会遇到认(sha)真(diao)的产品.比如,最近遇到的,要求实现手动上传特定格式文件(用户点击“上传文件”按钮,确定之后,只是单纯选择了文件 ...

  2. Vue+Element UI 实现视频上传

    一.前言 项目中需要提供一个视频介绍,使用户能够快速.方便的了解如何使用产品以及注意事项. 前台使用Vue+Element UI中的el-upload组件实现视频上传及进度条展示,后台提供视频上传AP ...

  3. Element UI中的上传文件功能

    上传文件给后台: <el-upload style="display:inline-block" :limit=" class="upload-demo& ...

  4. 封装upload文件上传类

    <?php //封装php中的单文件(图片)上传类 /*  //参数1:$file 文件数组  5个属性值 name,type,size,tmp,error   //参数2:文件保存的路径$pa ...

  5. Nginx Upload Module 上传模块

    传统站点在处理文件上传请求时,普遍使用后端编程语言处理,如:Java.PHP.Python.Ruby等.今天给大家介绍Nginx的一个模块,Upload Module上传模块,此模块的原理是先把用户上 ...

  6. React antd如何实现<Upload>组件上传附件再次上传已清除附件缓存问题。

    最近在公司做React+antd的项目,遇到一个上传组件的问题,即上传附件成功后,文件展示处仍然还有之前上传附件的缓存信息,需要解决的问题是,要把上一次上传的附件缓存在上传成功或者取消后,可以进行清除 ...

  7. element ui 渲染超过上百条数据时页面卡顿，更流畅的加载大量数据

    问题:element ui table渲染上百条数据,页面渲染开始出现延时 解决方案:使用pl-table 注意:设置use-virtual并给定table高度

  8. 《Play for Java》学习笔记（六）文件上传file upload

    一. Play中标准方法 使用表单form和multipart/form-data的content-type类型. 1.Form @form(action = routes.Application.u ...

  9. jQuery File Upload 图片上传解决方案兼容IE6+

    1.下载:https://github.com/blueimp/jQuery-File-Upload 2.命令: npm install bower install ================= ...

随机推荐

  1. 分享四个 Linux 上的网络信息嗅探工具

    在计算机网络中,数据是暴露的,因为数据包传输是无法隐藏的,所以让我们来使用 whois.dig.nmcli和 nmap 这四个工具来嗅探网络吧. 请注意,不要在不属于自己的网络上运行 nmap ,因为 ...

  2. Android“寄生兽”漏洞技术分析

    一.关于app的缓存代码 安卓的应用程序apk文件是zip压缩格式的文件,apk文件中包含的classes.dex文件相当于app的可执行文件,当app运行后系统会对classes.dex进行优化,生 ...

  3. Tomcat 动态数据库连接池

    package com.boguan.bte.util; import java.sql.Connection;import java.sql.SQLException;import java.uti ...

  4. Centos 发送smtp邮件

    说明:          1.本文是用网易smtp服务,QQ的没试过        2.在Centos7上测试 实现:        1.关闭本机的sendmail服务或者postfix服务     ...

  5. 列表生成式+过滤器（filter）+映射（map）+lambda总结

    这些都是python的特色,不仅强大,而且好用,配合起来使用更是无敌. 零.lambda lambda用于产生一个匿名表达式,组成部分为:lambda + ‘函数表达式’ ‘函数表达式’由一个冒号加上 ...

  6. 洛咕 P3706 [SDOI2017]硬币游戏

    假设f[i]是第i个同学胜利的概率,也就是随机序列第一个匹配到s[i]的概率 假设前面有一个字符串\(S\),(假设无限长但没有匹配),现在往后面要加上第i个串\(s[i]\),这个的概率设为\(P_ ...

  7. C语言学习之联合类型

    前言 联合(union)是一种特殊的数据类型,和结构体很像,结构体各成员变量有自己独立的存储位置,而联合的成员变量共享同一片存储区域,因此联合变量再一个时刻只能保存它的某一个成员的值. 联合的定义和初 ...

  8. [CF1062F]Upgrading Cities[拓扑排序]

    题意 一张 \(n\) 点 \(m\) 边的 \(DAG\) ,问有多少个点满足最多存在一个点不能够到它或者它不能到. \(n,m\leq 3\times 10^5\) 分析 考虑拓扑排序,如果 \( ...

  9. numpy 初识（二）

    针对 numpy.array(序列)的实例介绍 ndim 数组(矩阵)的维度 size 所有元素的和 数学运算(+, -) 元素个数一样,对应位置相减 加,减,乘,平方一个数,执行广播形式:即都减去一 ...

  10. Stm32l151+mpu6050+uart读取数据调试

    新近买了一个MPU6050模块,如上图,这个模块上的三块黑色分别是:稳压芯片662K,STM8s003f3p6,MPU6050. 根据此模块的说明书,可以使用USB转TTL将模块与上位机连接,通过卖家 ...