React Froala wysiwyg-editor中的图像上传参数

Question

我使用了ReactJS version的Froala WYSIWYG Editor。使用图像上传功能时，无法在服务器请求时获取参数。

这是配置：

this.config = {
    // Set the image upload parameter.
    imageUploadParam: 'image',

    // Set the image upload URL.
    imageUploadURL: apiUrl + "/api/v1/admin/upload/image",

    // Additional upload params.
    imageUploadParams: {
        token: cookie.getItem('token'),
        test_id: '11',
    },

    // Set request type.
    imageUploadMethod: 'POST',

    // Set max image size to 2MB.
    imageMaxSize: 2 * 1024 * 1024,

    // Allow to upload PNG and JPG.
    imageAllowedTypes: ['jpeg', 'jpg', 'png', 'gif'],
}

[上传图像时，我收到以下消息：

{“代码”：403，“消息”：“令牌无效！”}

我检查了请求条目：

console.log(request.body);

结果：{}

console.log(request.query);

结果：{}

console.log(request.params);

结果：{}

我错过了什么还是“配置”部分错了吗？

Answer 1

Junaid Babatunde在这方面写了一篇很棒的文章，这是链接：https://medium.com/@junaidtunde1/angular-2-with-froala-text-editor-image-upload-to-remote-server-732ef2793356

默认的图像上传会被'beforeUpload'事件拦截，您可以在其中将其发送到数据库，然后在回调中（从数据库）将图像插入编辑器，将原始副本发送到数据库后将其丢弃。数据库，然后是副本插入到编辑器中。

顺便说一句-imageUpload：显然需要true！

这里是代码：

options: Object = {
    charCounterCount: false,
    placeholderText: 'Edit Your Content Here!',
    imageUpload: true,
    imageDefaultAlign: 'left',
    imageDefaultDisplay: 'inline-block',
    // Set max image size to 5MB.
    imageMaxSize: 5 * 1024 * 1024,
    // Allow to upload PNG and JPG.
    imageAllowedTypes: ['jpeg', 'jpg', 'png'],
    events: {
      'froalaEditor.image.beforeUpload': function(e, editor, images) {
        // Before image is uploaded
        const data = new FormData();
        data.append('image', images[0]);

        axios.post('your_imgur_api_url', data, {
          headers: {
            'accept': 'application/json',
            'Authorization': 'your_imgur_client_id/api_key',
            'Accept-Language': 'en-US,en;q=0.8',
            'Content-Type': `multipart/form-data; boundary=${data._boundary}`,
          }
        }).then(res => {
          editor.image.insert(res.data.data.link, null, null, editor.image.get());
        }).catch(err => {
          console.log(err);
        });
        return false;
      }
    }
  };