Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)


Posted in Javascript onMarch 23, 2020

最近有使用vue+elementUI实现多图片上传的需求,遂做此纪录。
本次主要写一下前端的实现细节,至于后台以Multipart[ ]数组接收即可,不再赘述,网上一搜大把文章可供参考。
本次使用elementui的上传图片控件的照片墙类型,其使用示例可具体查看官方文档

Elementui 多图上传控件

需要注意的是,官方文档中的示例采用自动上传的方式,大多数情况我们是需要点击上传按钮或和表单一起提交才开始上传的(即手动上传),此时官方的示例就不满足我们的需求了。怎么办?当然是自己动手丰衣足食啦!!!
进入正题实现后以及上传保存成功后的效果如图

Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)

Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)

实现代码

Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)

这里有几个属性需要注意一下(敲黑板!!!)

因为本次采用手动上传所以需要把action属性置为空,上传的url我们在点击确定时再传给控件的方法
multiple:表示支持多图上传
auto-upload:表示自动上传此处需要设置为“true”(原因下面重点讲)
accept表示允许上传的图片后缀(填写好后点击选择图片的按钮时,浏览器会过滤掉不属于这些后缀的图片。如需要多个值用“,”隔开)
list-type:图片显示样式,可以参考官方文档
file-list:图片回显的文件列表
before-upload:上传前执行的方法,可以在这里检查图片的类型、大小等
http-request:该方法会携带一个content参数使用其属性content.file可以获取到将要上传的文件对象
on-preview:触发图片预览时的方法
on-exchange:图片列表更改时触发的方法,该方法携带(file,fileList)两个参数,file表示刚刚新增到图片列表的文件,fileList表示此时的文件列表
on-remove:表示删除图片时触发的方法同样携带(file,fileList)两个参数
on-exceed:方法表示上传的列表长度超过限制时触发的方法,前提是设置的limit属性,该属性接收Number类型

接下来说为什么要手动上传还要将”auto-upload“设置为true。
要想上述的before-upload、on-exchange、on-remove等关键方法生效需要把”auto-upload“设置为true

选好了要上传的图片点击上传是不是就ok了?试了一下发现不行,why?我们在选择图片时触发的on-change方法中打印file参数

Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)
Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)

通过打印发现file参数并不是我们真正想要的对象,仔细观察会看到file对象中还有一个raw对象,此时眼前一亮,这才是我们想要的
笔者的采用的方法是在上传的方法中去遍历上传列表拿到每个对象中的raw对象,然后将拿到的raw对象组成的list传到后台去保存(别忘了Format对象)

Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)

如果有其他更好的获取方法还希望多多指点!!!
上传成功后怎么回显呢?
我们知道上传成功后后台会将图片的url返回给我们。我是这么做:把后台但会的url集合再转成file的集合

Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)

其中this.form.images即为url的集合
这样就可以成功回显了,还可以继续在上传后的列表再次上传或删除已上传的图片
注意:已经上传了的图片已经不可以再次提交到后台再次上传,这个时候就需要你将已上传的图片过滤掉再上传,可以在上传的时候判断图片的url中包不包含“blob”,如果包含则可以上传,若不包含说明已经上传过了需要过滤掉,此外还需要保持上传的顺序

Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)

总结

到此这篇关于Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)的文章就介绍到这了,更多相关vue elementUI多图片上传 回显内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
js快速排序的实现代码
Dec 08 Javascript
js与jQuery 获取父窗、子窗的iframe
Dec 20 Javascript
jQuery响应enter键的实现思路
Apr 18 Javascript
基于jquery固定于顶部的导航响应浏览器滚动条事件
Nov 02 Javascript
JavaScript数据类型转换的注意事项
Jul 31 Javascript
轻松搞定js表单验证
Oct 13 Javascript
基于javascript的拖拽类封装详解
Apr 19 Javascript
jquery将信息遍历到界面上实例代码
Jan 21 jQuery
js实现简单的无缝轮播效果
Sep 05 Javascript
js+h5 canvas实现图片验证码
Oct 11 Javascript
vue render函数动态加载img的src路径操作
Oct 26 Javascript
nuxt 服务器渲染动态设置 title和seo关键字的操作
Nov 05 Javascript
小程序使用分包的示例代码
Mar 23 #Javascript
用JS实现选项卡
Mar 23 #Javascript
vscode 配置vue+vetur+eslint+prettier自动格式化功能
Mar 23 #Javascript
云服务器部署Node.js项目的方法步骤(小白系列)
Mar 23 #Javascript
vue ssr+koa2构建服务端渲染的示例代码
Mar 23 #Javascript
详解webpack-dev-middleware 源码解读
Mar 23 #Javascript
vscode调试node.js的实现方法
Mar 22 #Javascript
You might like
php5.4以上版本GBK编码下htmlspecialchars输出为空问题解决方法汇总
2015/04/03 PHP
Symfony2安装第三方Bundles实例详解
2016/02/04 PHP
JS实现遮罩层效果的简单实例
2013/11/12 Javascript
快速解决jQuery与其他库冲突的方法介绍
2014/01/02 Javascript
js验证IP及子网掩码的合法性有效性示例
2014/04/30 Javascript
jQuery1.9.1针对checkbox的调整方法(prop)
2014/05/01 Javascript
Node.js 制作实时多人游戏框架
2015/01/08 Javascript
jQuery实现垂直半透明手风琴特效代码分享
2015/08/21 Javascript
js实现网站最上边可关闭的浮动广告条代码
2015/09/04 Javascript
使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法
2016/07/07 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐二)
2016/07/12 Javascript
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
2017/11/14 jQuery
node.js基础知识小结
2018/02/26 Javascript
angular将html代码输出为内容的实例
2018/09/30 Javascript
vue 组件之间事件触发($emit)与event Bus($on)的用法说明
2020/07/28 Javascript
解决vue+webpack项目接口跨域出现的问题
2020/08/10 Javascript
11个Javascript小技巧帮你提升代码质量(小结)
2020/12/28 Javascript
Python采用Django开发自己的博客系统
2020/09/29 Python
python监控linux内存并写入mongodb(推荐)
2017/09/11 Python
Python3中的json模块使用详解
2018/05/05 Python
pandas 对每一列数据进行标准化的方法
2018/06/09 Python
Python (Win)readline和tab补全的安装方法
2019/08/27 Python
Python re正则表达式元字符分组()用法分享
2020/02/10 Python
html5 input属性使用示例
2013/06/28 HTML / CSS
html5 figure和figcaption的使用方法
2018/09/10 HTML / CSS
JustFab加拿大:女鞋、靴子、手袋和服装在线
2018/05/18 全球购物
学生喝酒检讨书
2014/02/06 职场文书
小学语文国培感言
2014/03/04 职场文书
高中生第一学年自我鉴定
2014/09/12 职场文书
2014年科室工作总结
2014/11/20 职场文书
2015年思想品德教学工作总结
2015/07/22 职场文书
2016年“六一儿童节”校园广播稿
2015/12/17 职场文书
字典算法实现及操作 --python(实用)
2021/03/31 Python
用几道面试题来看JavaScript执行机制
2021/04/30 Javascript
动画《朋友游戏》公开佐藤友生绘制的开播纪念绘
2022/04/06 日漫
未发现nvidia显卡怎么办?Win11系统中未检测到nvidia显卡解决教程
2022/04/08 数码科技