关于 TinyMCE 编辑器插件的多图上传处理
在使用 TinyMCE 编辑器时,如果需要支持多图上传,可以使用 axupimgs.zip 插件。然而,需要注意的是,该插件将多图上传拆分为逐个图像上传的流程,导致接口调用频率过高。
解决办法
为了解决接口调用频率过高的问题,可以自定义一个上传处理程序(images_upload_handler),以批量方式上传图像。该处理程序需要返回一个 promise,当上传成功时,将上传后的图像地址解析为该 Promise。
实现步骤如下:
- 定义一个数组 files 来存储等待上传的文件,以及一个数组 tasks 来存储上传任务的 Promise。
- 自定义一个 uploadImages 函数,用于选择图像后处理上传。它将文件 blob 添加到 files 数组,并返回一个 Promise。该 Promise 中存储着上传任务的 resolve 方法。
- 提供一个单独的 doUpload 函数来实际上传文件。使用 FormData 创建一个 POST 请求,将文件添加到表单数据中,并发送到后端。
- 成功响应后,遍历 files 数组,依次调用相应的 tasks 数组中的 resolve 方法,完成图像上传。
这种方法允许批量上传图像,降低了接口调用频率,满足了业务需求。具体实现的关键在于将后端响应与前端存储的 resolve 方法匹配起来。