3

我正在使用 Trix，为了上传附件，我们的后端开发人员告诉我应该将附件转换为 base64 并将 base64 数据保存到数据库中，而不是上传二进制文件。

我编写了这段代码来实现它，输入字段（HTML）的输出按预期工作，但图像预览没有显示在编辑器中。 

$(function() {

  $(document).on('trix-attachment-add', function(event) {
    var attachment = event.originalEvent.attachment;
    // Convert data URLs to File objects.
    if(attachment.file) {
      return uploadAttachment(attachment);
    } else {
      console.error('Could not upload attachment.');
      console.error(attachment);
      attachment.remove();
    }
  });

});

function uploadAttachment(attachment) {
  var reader = new FileReader();
  console.log(attachment)

      // Set the reader to insert images when they are loaded.
      reader.onload = function (e) {
        var result = e.target.result;
        var attrs = {
          src : result,
          url: result,
          href : ''
        };
        attachment.setAttributes(attrs)
        attachment.setUploadProgress(100);
      }
      // Read image as base64.
      reader.readAsDataURL(attachment.file);
    }

我不知道是什么导致了这个问题。

4

2 回答 2

0

尝试更换

$(document).on('trix-attachment-add', function(event) {

和

document.addEventListener("trix-attachment-add", function(event) {

这可能是事件侦听器被缓存，因此触发了多次。图像的第一次加载工作，它可能是使这看起来破坏的下一次加载。

也可能是 Turbolinks 问题，所以用这个包装你的代码：

$(document).on('turbolinks:load', function() {
于 2020-02-26T06:07:33.970 回答
0

我已经设法通过设置fileObjectURL属性来解决这个问题，如下所示

attachment.attachment.fileObjectURL = result;

于 2020-08-31T10:47:55.257 回答