Vue 实现多图上传并可以调整图片顺序

更新日期: 2019-01-22 阅读次数: 2516 分类: VueJS

由于 Element UI 的 Upload 上传组件只支持多图上传,但并不支持图片的顺序调整,而实际使用场景中,例如,产品封面轮播图,经常要用到图片顺序调整功能。所以,找了一下解决方案。

一些备选方案

JQuery UI sortable

效果演示,参考:https://codepen.io/malkafly/pen/gbVYZb

上面示例中使用的排序组件是 jquery ui 中的 sortable 功能。

但是,我测试的过程中,感觉 jquery ui 的这个功能非常不流畅,经常出现没有响应的情况。

Sortablejs

找到一个竞品 sortablejs, 从对比视频上看,优化效果明显。里面有视频演示,及对比:https://sortablejs.github.io/Sortable/

而且有 vue 版本的实现。

Vue draggable 项目地址:https://github.com/SortableJS/Vue.Draggable

带删除按钮的 vue draggable 实现:https://jsfiddle.net/dede89/5Leuhh1n/

代码实现

我觉得使用 Element UI upload 组件结合 Vue draggable 来实现上传后的图片调整顺序。

补充:结合使用,还间接修复了一个 Element UI upload 的一个巨大缺陷,即,无法同时上传多张图片。因为,选择多张图片上传时,upload 组件的 on-success 回调,只会被调用一次。最简单的解决方案是,将 file-list 去掉,引入了 draggable 之后,不再需要 upload 组件来管理删除,和排序,所有 file-list 去掉,没有任何额外工作量。

查看 Demo 效果页面

效果 Gif 截图:

Vue 实现多图上传并可以调整图片顺序

谈笑风生

啊是大

怎么实现的

大象

DEMO 链接里有实现代码

mystry

请问有源码吗?

大象

DEMO 链接里有实现代码,F12 可见

爱评论不评论

近期节日

2019年05月30日 五卅运动纪念
2019年05月31日 世界无烟日
2019年06月01日 六一儿童节
2019年06月05日 世界环境日
2019年06月06日 芒种
2019年06月06日 全国爱眼日
2019年06月07日 端午节
2019年06月11日 中国人口日
2019年06月16日 父亲节
2019年06月20日 世界难民日
2019年06月21日 夏至
2019年06月22日 中国儿童慈善活动日
查看更多节日