关于web端tinymce编辑器的插件多图上传怎么处理?

Z时代
2024-03-08
分类：IT

我这边web端用了一个编辑器 tinymce, 因为有多图上传的需求,下了关于它的一个插件 axupimgs.zip
发现这个插件虽然是多图上传, 但是实际上是将多个图片分开,每次调用一次接口进行上传,而不是调用一次接口,将整体图片上传
因为我这边因为业务需要对接口调用频率进行限制
本来上传图片的接口是限制每天只能调用10次,每次上传的图片最大30张,
但是这个上传图片的插件一张图片就调用一次接口, 这样请求就太多了~~
求问有没有处理的好办法~~

回答：

看文档可以提供一个 images_upload_handler 参数，用来处理选择图片后处理上传的，而这里就传入了图片的 blob 对象，同时，这个方法要求返回一个 Promise，resolve 时，把上传成功的地址传进去就行。

那就对自己实现以下，在外部提供 files 数组用来存选择的文件，tasks 用来存 Promise 的 resolve 方法，实际上这里更像是 Deferred 了。

然后单独提供一个方法，doUpload 来上传文件，利用 FormData 上传文件，成功后，再便利调用 tasks 数组下的 resolve 方法完成上传就好。

至于这个 doUpload ，只是一个假设函数，你也可以选择再创建一个按钮来触发它。

整个过程中，重要的就是批量上传到后端的响应要和你前端的存的 resolve 对应起来，这里比较简单就是用的下标。

Handling image uploads | TinyMCE Documentation

const files = [];
const tasks = [];
function uploadImages (blob, progress) {
  // 把选择的文件放到待上传的列表
  files.push(blob)
  return new Promise(function (resolve) {
    // 把这个 Promise 的 resolve 也放上去。
    tasks.push(resolve)
  })
}
function doUpload () {
  const _files = files.slice();
  const _tasks = tasks.slice();
  files.length = 0
  tasks.length = 0
  console.log(_files);
  const formData = new FormData;
  _files.forEach((file, index) => formData.append(`files[${index}]`, file))
  fetch('/image', {
    method: 'post',
    body: formData
  }).then(resp => resp.json()).then(result => {
    // 假设 result 里面有个 uploaded 数组，他返回的顺序，跟你发送的 files 的下标保持一致的。
    _tasks.forEach((task, index) => {
      task(result.uploaded[index])
    })
  })
}
// 测试
uploadImages('1', 0).then(console.log)
uploadImages('2', 0).then(console.log)
uploadImages('3', 0).then(console.log)
doUpload()