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

更新日期: 2019-01-22 阅读次数: 1143 分类: 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 实现多图上传并可以调整图片顺序

领取阿里云图片 CDN 优惠券

阿里云 CDN 优惠券,最高可领 1888 元

谈笑风生

啊是大

怎么实现的

大象

DEMO 链接里有实现代码

爱评论不评论

近期节日

2019年04月01日 愚人节
2019年04月01日 复活节
2019年04月02日 国际儿童图书日
2019年04月04日 寒食节
2019年04月05日 清明节
2019年04月07日 世界卫生日
2019年04月11日 世界帕金森病日
2019年04月20日 谷雨
2019年04月22日 世界地球日
2019年04月23日 世界读书日
2019年04月26日 知识产权日
2019年04月30日 全国交通安全反思日
查看更多节日