Параметры загрузки изображений в реагируют на WalaiWyg-редактор. - PullRequest
Новая
       90

Параметры загрузки изображений в реагируют на WalaiWyg-редактор.

0 голосов
/ 28 января 2020

Я использовал ReactJS версия из 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": "Токен недействителен!"}

Я проверил запись запроса: 

console.log(request.body);

Результат: {} 

console.log(request.query);

Результат: {} 

console.log(request.params);

Результат: {}

Я что-то упустил или раздел Config неправильный?

1 Ответ

1 голос
/ 17 апреля 2020

Джунаид Бабатунде написал отличную статью на эту тему. Вот ссылка: 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;
      }
    }
  };
...