昨天修完了一个上传组件删除时，图片删掉了，但是地址仍然在的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. neo4j用collect 代替union 并实行分页

    MATCH pa=(j:User)-[r:PostLikeRel|:ReplyRel|:RetweetRel]->(m:User{guid:"f092a1dc6c23b26b020bd ...

  2. Java基础—常用类之String类

    一.String类是什么 public final class String implements java.io.Serializable, Comparable<String>, Ch ...

  3. EZ 2018 02 26 NOIP2018 模拟赛（一）

    这次是校内OJ(HHHOJ)线上比赛,网址:http://211.140.156.254:2333/contest/51 (我去刚刚快写完了手贱关掉了) 这次总体难度也不高,T1&&T ...

  4. flask, SQLAlchemy, sqlite3 实现 RESTful API 的 todo list, 同时支持form操作

    flask, SQLAlchemy, sqlite3 实现 RESTful API, 同时支持form操作. 前端与后台的交互都采用json数据格式,原生javascript实现的ajax.其技术要点 ...

  5. Kubernetes学习之路（十九）之Kubernetes dashboard认证访问

    Dashboard:https://github.com/kubernetes/dashboard 一.Dashboard部署 由于需要用到k8s.gcr.io/kubernetes-dashboar ...

  6. 微信小程序之用户信息授权 wx.getUserInfo

    用户授权 <button open-type="getUserInfo" bindgetuserinfo='getUser'>授权用户信息</button> ...

  7. [LOJ#6039].「雅礼集训 2017 Day5」珠宝[决策单调性]

    题意 题目链接 分析 注意到本题的 \(C\) 很小,考虑定义一个和 \(C\) 有关的状态. 记 \(f(x,j)\) 表示考虑到了价格为 \(x\) 的物品,一共花费了 \(j\) 元的最大收益. ...

  8. SQL SERVER 2008R2 安装问题

    背景   今天帮可以安装数据库.操作系统是windows server 2012 标准版,  安装SQL SERVER 2008R2 . 运行安装程序,提示如下   这是因为两者之间存在兼容性问题. ...

  9. stl源码剖析 详细学习笔记 set map

    // //  set map.cpp //  笔记 // //  Created by fam on 15/3/23. // // //---------------------------15/03 ...

  10. photoshop cs6安装过程中安装程序遇到错误:请重启计算机，解决办法

    1.关闭防火墙和杀毒软件 2.删除注册表 依次展开HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Session Manager目录,找到其中的 ...