在 element ui 的 GitHub issue 中搜索了一下,发现 upload 组件确实不支持自动更新 file list,需要手动在上传成功和删除的回调中处理文件列表同步。。。

这个体验太差了。

无奈只能手动实现,设置 on-success 和 on-remove 的回调处理。

模板代码

class="upload-demo"

action="/api/upload"

:on-success="handle_success"

:on-remove="handle_remove"

:on-preview="handlePreview"

:before-remove="beforeRemove"

multiple

:limit="5"

:on-exceed="handleExceed"

:before-upload="uploadBefore"

accept=".jpg,.gif,.png,.jpeg,.txt,.pdf,.doc,.docx,.xls,.xlsx"

:file-list="fileList">

Click to Upload

JS 代码

var vm = new Vue({

el: "#upload_file",

data: {

fileList: []

},

element vue 上传模板_Vue Element UI upload 组件上传文件之后 file list 依旧是空数组相关推荐

  1. element vue 上传模板_vue+element 文件上传

    一.前言 element ui 已经提供了文件上传的组件,直接拿来就能用.具有以下几个特点: 限制文件上传的个数,多个文件会发起多个请求. 可以设置文件选择后自动上传或者手动触发上传,并且手动触发可以 ...

  2. element ui upload组件文件上传一次 后,不论是上传成功之后修改文件再上传还是上传失败重新上传,再次点击上传均无反应。

    问题: Element UI Upload 组件文件上传一次 后,不论是上传成功之后修改文件再上传还是上传失败重新上传,再次点击上传均无反应. 原因: 第一次上传文件后,浏览器还保存着我们已经上传的文 ...

  3. antd vue upload组件上传视频并实现视频预览

    antd vue upload组件上传视频并实现视频预览 html代码 <form><a-form-itemlabel="商品视频":labelCol=" ...

  4. 使用elementui实现表单上传功能_使用ElementUI中的upload组件上传Excel文件

    最初使用该组件实现图片上传是没有问题的,前后端配合,最终实现想要的效果,组件使用过代码如下: 将文件拖到此处,或点击上传 现在改为使用该组件实现Excel文件上传,组件的使用几乎是不变的,代码如下: ...

  5. 阿里云OSS 服务端签名后直传之分片上传(结合element-ui的upload组件)

    分片上传(结合element-ui的upload组件实现自定义上传) async uploadFree(content){let data = await this.getOssToken(); // ...

  6. element-ui upload组件 上传文件类型限制

    element-ui upload组件 上传文件类型限制 <el-uploadclass="c-upload"ref="upload":action=&q ...

  7. antd Upload组件上传状态一直处于uploading

    antd Upload组件上传状态一直处于uploading 对于受控模式,需要在 onChange 中始终 setState fileList,保证所有状态同步到 Upload 内 import { ...

  8. ant design Upload组件上传文件类型

    Upload组件上传文件类型设置 1.设置上传文件类型为excel <template><a-uploadname="file":multiple="t ...

  9. ant design vue 中Upload组件如何自定义文件列表的样式

    ant design vue 中Upload组件如何自定义文件列表的样式 问题 历程 UploadList 组件源码 h() 方法 实现 注 问题 技术:vue.ant design vue 在开发项 ...

最新文章

  1. Hibernate一对一关联映射配置
  2. spring第五讲:aop
  3. ora-24811提供写入的数据少于指定的数据_C++开源、高性能时序数据库pinusdb
  4. boost::hana::drop_while用法的测试程序
  5. mysql 开发权限_mysql权限管理
  6. remoteing2
  7. .NET 基础 一步步 一幕幕 [前言]
  8. Python项目部署到Docker的完整过程
  9. 有哪些好看的字体可以免费用?看完这篇就知道了
  10. 字节跳动实习 视频面试
  11. ActiveMQ学习笔记(4)----JMS的API结构和开发步骤
  12. Laravel填充数据Seeder出现Target class [***] does not exist.
  13. 内网环境下使用rpm包制作yum数据源及使用
  14. 《你的孤独,虽败犹荣》读后感
  15. 《孙子兵法》帮你找到不合格的管理者
  16. 【无忧美名网-一款根据诗经、古诗词等国学给宝宝起名的小程序-uniapp端】
  17. 2021年山东省安全员C证考试及山东省安全员C证找解析
  18. 微型计算机及控制技术试题,微型计算机控制技术试卷
  19. C++文件流打开文件失败原因
  20. 如何根据IP地址判断是IPv4还是IPv6

热门文章

  1. 在keras中使用gpu加速训练模型;安装cuda;cudnn;cudnn_cnn_infer64_8.dll 不在path中;device_lib.list_local_devices无gpu;挂掉
  2. 研究生必备快速查找翻译阅读外文文献方法
  3. 常用的Linux外文文献,Linux大学外文文献翻译及原文.doc
  4. struct timeval
  5. Win7系统中wmiprvse.exe占用CPU高如何解决
  6. 关于win10主机共享打印机,其他主机连接不上的解决方法①
  7. java获取时间的各种风格_各种获取时间的方法包含各类时间格式
  8. python的歌曲评论数据分析_用Python爬取陈奕迅歌曲10万条评论的新发现
  9. 远程计算机 函数不支持,远程桌面连接提示:要求的函数不受支持解决方法(The function requestred is not support)...
  10. 如何用MATLAB绘制真值表,编写真值表 - MATLAB Simulink - MathWorks 中国