反应froala wysiwyg-editor中的图像上传参数

Question

我被利用了ReactJS version of 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'],
}

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

{"code":403,"message":"Token is not valid!"}

我检查了请求条目：

console.log(request.body);

Result: {}

console.log(request.query);

Result: {}

console.log(request.params);

Result: {}

我是不是漏掉了什么或者配置部分有误？

Answer 1

Junaid Babatunde 就此写了一篇很棒的文章，这里是 link： 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;
      }
    }
  };

Answer 2

我写了两篇值得一读的文章：https://ryan-mckenna.medium.com/froala-events-in-react-typescript-58e7e8ff1d4f 和 https://ryan-mckenna.medium.com/froala-editor-react-scroll-bar-start-position-3f6d788c8768

还展示了如何与 React 和事件集成！

反应froala wysiwyg-editor中的图像上传参数

Image upload params in react froala wysiwyg-editor

parameters

upload

wysiwyg

reactjs

froala