微擎ueditor编辑器图片批量上传顺序混乱的解决方法
时间:2020-01-07
本文章向大家介绍微擎ueditor编辑器图片批量上传顺序混乱的解决方法,主要包括微擎ueditor编辑器图片批量上传顺序混乱的解决方法使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
上周六有客户反映刚上线的商城管理系统在商品详情页批量上传图片的时候出现图片显示顺序与上传顺序不一致的问题,经排查,发现是编辑器在上传时是按上传完成的顺序插入图片的,即先传完先显示,在网上查了一下,发现很多人都有遇到这个问题,初步认为是ueditor编辑器的bug,于是按照网上的方法去解决,但都没有解决问题,调试查找之后发现网上的解决方法根本不适合微擎的多图上传,因为涉及的文件都没有被调用。。。。无奈只好自己查找,在和同事查找了将近一天之后终于找到了两个相关文件,然后又花了些功夫,最后总算是弄好了,想起来仍心有余悸,接下来把要修改的文件和方法放出来,有需要的可以参考。
web\resource\component\fileuploader\fileuploader.min.js
在图中所示位置添加红框中的代码,核心代码是这两句:
let aa= a.id.split('WU_FILE_');
b.key = Number(aa[1]);
web\resource\js\app\util.js
在图中所示位置添加红框中的代码,核心代码是这几句:
let newArr = JSON.parse(JSON.stringify(b)); for(var i=0; i<b.length; i++){ newArr.splice(b[i]['key'],1,b[i]); } b = newArr;
至此就修改完成了,该模块是改写的上传模块,与ueditor并不一致,所以请不要用ueditor的修改方法去修改
原文地址:https://www.cnblogs.com/yite/p/12161370.html
- 参考基因组没有,经费也没那么多,怎么办?
- .Net下SQLite的DBHelp
- 数据库进程间通信解决方案之MQ
- 【学术】算法交易的神经网络:强化经典策略
- java.util.logging 例子
- WPF命令(Command)介绍、命令和数据绑定集成应用
- lncRNA实战项目-第六步-WGCNA相关性分析
- 【项目】Github上的一个简单项目:用人工智能预测大学录取概率
- lncRNA实战项目-第五步-差异表达的mRNA和lncRNA
- WPF--模板选择
- 高级运维工程师面试题(更新中)
- Nginx rewrite 获取问好“?”后面的参数
- 微信公众平台开放JS-SDK(微信内网页开发工具包)
- 数据库与图片完美解决方案
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Dynamic Programming - 72. Edit Distance
- Dynamic Programming - 64. Minimum Path Sum
- Dynamic Programming - 322. Coin Change
- Dynamic Programming - 279. Perfect Squares
- Dynamic Programming - 120. Triangle
- Dynamic Programming - 63. Unique Paths II
- Tree - 109. Convert Sorted List to Binary Search Tree
- Tree - 108. Convert Sorted Array to Binary Search Tree Easy
- Tree - 236. Lowest Common Ancestor of a Binary Tree
- Tree - 235. Lowest Common Ancestor of a Binary Search Tree
- Tree - 98. Validate Binary Search Tree
- Tree - 199. Binary Tree Right Side View
- Tree - 103. Binary Tree Zigzag Level Order Traversal
- Tree - 107. Binary Tree Level Order Traversal II
- Trie - 212. Word Search II