TinyMCE 4.3 只上传一张图片答案

【问题标题】：TinyMCE 4.3 only uploading one imageTinyMCE 4.3 只上传一张图片
【发布时间】：2018-08-21 14:26:50
【问题描述】：

TinyMCE 不允许在帖子中上传多个文件。您可以选择一个文件，它将插入到 TinyMCE 编辑器中，但是一旦您提交，只会上传最后插入的图像。

下面是我正在使用的代码：（在我认为 TinyMCE 会处理文件数组的第二次尝试中删除了 [0]）

if (meta.filetype == 'image') {
    $('#upload').trigger('click')
    $('#upload').on('change', function() {
        var file = this.files[0]
        var reader = new FileReader()

        var name = file.name.split('.')[0]
        var blobCache = tinymce.activeEditor.editorUpload.blobCache
        var blobInfo = blobCache.create(name, file, reader.result)
        blobCache.add(blobInfo);
     reader.onload = function(e) {
        callback(blobInfo.blobUri(), {
                    alt: file.name,
                    title: name
                })
        }
        reader.readAsDataURL(file)
    })
}
}

我尝试使用 for 循环附加其他文件，并从文件中删除 [0] 并拆分但没有成功。

file_picker_callback: function(callback, value, meta) {
  if (meta.filetype == 'image') {
    $('#upload').trigger('click')
      $('#upload').on('change', function() {

      var file = this.files//[0]
      var reader = new FileReader()

      var name = []
      for(var x = 0; x < file.length; x++) {
        name.push(file[x].name.split('.'))
      }

      var blobCache = tinymce.activeEditor.editorUpload.blobCache
      var blobInfo = blobCache.create(name, file, reader.result)
      blobCache.add(blobInfo);       
      reader.onload = function(e) {
       callback(blobInfo.blobUri(), {alt: file.name, title: name})
      }
      reader.readAsDataURL(file)
    })
  }
}

我也尝试过允许自动上传，这仅适用于第一张图像，其余图像回退到数据库中的 base64。最后，我尝试合并所有文件以便上传，但是我在 console.log 中没有看到不同的文件名。例如，我附加了一个文件，我在 console.log 中看到了一个文件，我附加了另一个，我在 console.log 中看到了两个响应，但带有最新的附加文件，但只有最后一个附加的图像会在提交时上传。似乎 TinyMCE 会用每个图像附件覆盖文件。

是否有其他方法可以解决此问题，以便我可以使用 TinyMCE 将图片添加到帖子中，并在提交后全部上传，而不是最后附上的图片？

【问题讨论】：

日志显示作为 blob 上传的图像，然后使用适当的 { "location": "/someimage.jpg"} 响应调用文件上传脚本，但是任何添加更多图像的额外尝试只会导致图像 blob，但没有调用上传脚本。奇怪的是，每次使用 TinyMCE 尝试附加图像都会导致增加 1，因此第一个附件有两个 blob，然后是三个，然后是四个，依此类推。
现在修改以下内容允许上传图片，但在提交时它将上传最后一张附加的图片并忽略以下代码：var name = file.name.split('.') [0] 改为：var id = 'blobid' + (new Date()).getTime();

标签： javascript tinymce

【解决方案1】：

现在更改为以下内容以获得有效的解决方案。在调用 blobCache.create 时使用第一个参数的名称是问题的原因，因此需要一个唯一的 blobid。

    file_picker_callback: function(callback, value, meta) {
      if (meta.filetype == 'image') {

          $('#upload').on('change', function() {
              var file = this.files[0]
             var reader = new FileReader()

          reader.onload = function(e) {
              // var name = file.name.split('.')[0] // replaced with id below
              // var base64 = reader.result.split(',')[1]; // for base64
              var id = 'blobid' + (new Date()).getTime();
              var blobCache = tinymce.activeEditor.editorUpload.blobCache
              var blobInfo = blobCache.create(id, file, reader.result)
              blobCache.add(blobInfo);
               callback(blobInfo.blobUri(), {alt: file.name, title: name})
          }
          reader.readAsDataURL(file)
        })
        $('#upload').trigger('click')
      }
    }

【讨论】：