在使用百度编辑 UEditor 多张图片同时上传时,会发生图片上成功后,回调时图片顺序被打乱的问题。这主要是因为百度编辑器 UEditor 的图片上传接口,会优先处理比较大的图片,并返回地址。所以图片顺序发生了变化。

解决UEditor编辑器多图上传图片时,图片顺序被打乱的问题的方法

上传图片

解决UEditor编辑器多图上传图片时,图片顺序被打乱的问题的方法

上传成功回调,图片顺序发生变化

针对上面的问题,百度了一些方法,并测试成功!

解决百度 UEditor 编辑器多张上传图片被打乱的方法

1、编辑 UEditor/dialogs/attachment/attachment.js 文件

_this.fileList.push(json);

改成

_this.fileList[$file.index()] = json;

解决UEditor编辑器多图上传图片时,图片顺序被打乱的问题的方法

为防止上传失败的情况,避免数组中出现undefined项,需要加入以下代码

if (data == 'undefined') {
    continue;
}

解决UEditor编辑器多图上传图片时,图片顺序被打乱的问题的方法

2、编辑 UEditor/dialogs/image/image.js文件

_this.fileList.push(json);

改成

_this.fileList[$file.index()] = json;

解决UEditor编辑器多图上传图片时,图片顺序被打乱的问题的方法

为防止上传失败的情况,避免数组中出现undefined项,需要加入以下代码

if (data == 'undefined') {
    continue;
}

解决UEditor编辑器多图上传图片时,图片顺序被打乱的问题的方法

通过以上修改后,再次上传图片后,结果如下

解决UEditor编辑器多图上传图片时,图片顺序被打乱的问题的方法