通过 Froala 使用自定义响应格式将图像上传到服务器答案

【问题标题】：Upload image by Froala to server with custom response format通过 Froala 使用自定义响应格式将图像上传到服务器
【发布时间】：2016-02-10 11:46:52
【问题描述】：

我正在使用 Froala 编辑器。我想将图像上传到自己的服务器，如documentation 中所述，响应格式应为{ link: 'path/to/image.jpg' }，但我的服务器返回另一种格式的响应。

是否可以在 Froala 中使用自定义响应格式，可能是通过处理一些事件？

【问题讨论】：

也在找这个。
我没有找到解决方案。所以此时我只是将附加参数“格式”发送到服务器并根据它形成响应。只需几行代码，但无论如何在客户端使用自定义格式会很好。

标签： javascript wysiwyg froala

【解决方案1】：

通过前端与服务器响应模型无关。它的模型是在后端设计的，如果您需要更改它，您可以解析您获得的 Json 并根据需要更改模型。要完全按照您上面提到的方式获得模型，您应该与您的后端团队交谈。

【讨论】：

【解决方案2】：

我正在使用 cloudinary.com 上传和提供图像，我也无法控制响应。我的临时解决方案是像这样（coffeescript）修补 JSON.parse 方法：

var _parseJSON = JSON.parse; JSON.parse = function(j) { var response = _parseJSON(j); response.link = response.secure_url; return response; };

真心希望能找到更优雅的解决方案！

【讨论】：

【解决方案3】：

Froala 在管理上传时似乎没有修改服务器响应的机制。此froalaEditor.file.uploaded 有一个合适的 froala 事件，但它只能中止上传过程。将来可能会更新以适应此类情况

但是，您想要的绝对是可行的。首先，您需要在 froala 配置中向 imageUploadURL 属性添加查询参数，例如const froalaConfig = {imageUploadURL: '/yourUploadsEndpoint?fromFroala'}。需要此参数来区分 froala 与其他人实际发出的请求。

然后我们将对XMLHttpRequestObject 做一个小猴子补丁，这是froala 内部用来发出http 请求的：

const accessor = Object.getOwnPropertyDescriptor(XMLHttpRequest.prototype, 'responseText')

Object.defineProperty(XMLHttpRequest.prototype, 'responseText', {
  get() {
    const responseText = accessor.get.call(this)
    // here we can check if response url includes our previously set query param
    if (this.responseURL.includes('?fromFroala')) {
    // r is our response object
      const r = JSON.parse(responseText)

      return JSON.stringify({ link: <path to your uploaded image url here> })
    }

    return responseText
  },
  configurable: true,
})

这应该可以解决问题，直到 froala 切换到另一个数据获取 API。

【讨论】：

【解决方案4】：

只要有来自服务器的响应，就会触发image.uploaded 事件。您可以使用此事件的响应参数和image.insert method 一起在编辑器中添加图像。

此外，在回调结束时返回 false 以防止默认的编辑器上传链也很重要。

下面是一个代码sn-p：

$('.selector')
  .froalaEditor()
  .on('froalaEditor.image.uploaded', function (e, editor, response) {
    // Parse response to get image url.
    var img_url = ... ;

    // Insert image.
    editor.image.insert(img_url, false, null, editor.image.get(), response);

    return false;
  });

【讨论】：