时间戳

首页 > 解决方案 > react froala wysiwyg-editor 中的图像上传参数

reactjs - react froala wysiwyg-editor 中的图像上传参数

问题描述

我使用的是Froala WYSIWYG Editor的ReactJS 版本。当我使用图像上传功能时，我无法根据服务器请求获取参数。

这是配置：

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":"令牌无效！"}

我检查了请求条目：

console.log(request.body);

结果： {}

console.log(request.query);

结果： {}

console.log(request.params);

结果： {}

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

标签： reactjsparametersuploadwysiwygfroala

解决方案

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;
      }
    }
  };

推荐阅读