Как я могу отправить запрос на публикацию с изображением base64?

Я делаю компонент загрузки изображений в vue js с настраиваемой опцией обрезки. Обрезанная версия сохраняется в моем состоянии как строка base64. Это оно:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAeAAAAHgCAYAAAB91L6VAAAgAElEQVR4Xu2dCdh+1dT/v3+UDA1KMiQhlCEylDGZSqbI0Jy8JMmYUEloRFIpVJK5EpL0ilJmr6IQKiXzrCKESP2v72vfb8/z/O7hnH2fc/be53z2df2uoj1+9vrd6+y1117r/4kCAQhAAAIQgEDnBP5f5yMyIAQgAAEIQAACQgEjBBCAAAQgAIEEBFDACaAzJAQgAAEIQAAFjAxAAAIQgAAEEhBAASeAzpAQgAAEIAABFDAyAAEIQAACEEhAAAWcADpDQgACEIAABFDAyAAEIAABCEAgAQEUcALoDAkBCEAAAhBAASMDEIAABCAAgQQEUMAJoDMkBCAAAQhAAAWMDEAAAhCAAAQSEEABJ4DOkBCAAAQgAAEUMDIAAQhAAAIQSEAABZwAOkNCAAIQgAAEUMDIAAQgAAEIQCABARRwAugMCQEIQAACEEABIwMQgAAEIACBBARQwAmgMyQEIAABCEAABYwMQAACEIAABBIQQAEngM6QEIAABCAAARQwMgABCEAAAhBIQAAFnAA6Q0IAAhCAAARQwMgABCAAAQhAIAEBFHAC6AwJAQhAAAIQQAEjAxCAAAQgAIEEBFDACaAzJAQgAAEIQAAFjAxAAAIQgAAEEhBAASeAzpAQgAAEIAABFDAyAAEIQAACEEhAAAWcADpDQgACEIAABFDAyAAEIAABCEAgAQEUcALoDAkBCEAAAhBAASMDEIAABCAAgQQEUMAJoDMkBCAAAQhAAA....

теперь я пытаюсь отправить это изображение на свой js-сервер node с помощью API почтового запроса. В Postman я пишу тело, выбирая raw и json в этом теле следующим образом:

{
        "image" : "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAeAAAAHgCAYAAAB91L6VAAAgAElEQVR4Xu2dCdh+1dT/v3+UDA1KMiQhlCEylDGZSqbI0Jy8JMmYUEloRFIpVJK5EpL0ilJmr6IQKiXzrCKESP2v72vfb8/z/O7hnH2fc/be53z2df2uoj1+9vrd6+y1117r/4kCAQhAAAIQgEDnBP5f5yMyIAQgAAEIQAACQgEjBBCAAAQgAIEEBFDACaAzJAQgAAEIQAAFjAxAAAIQgAAEEhBAASeAzpAQgAAEIAABFDAyAAEIQAACEEhAAAWcADpDQgACEIAABFDAyAAEIAABCEAgAQEUcALoDAkBCEAAAhBAASMDEIAABCAAgQQEUMAJoDMkBCAAAQhAAAWMDEAAAhCAAAQSEEABJ4DOkBCAAAQgAAEUMDIAAQhAAAIQSEAABZwAOkNCAAIQgAAEUMDIAAQgAAEIQCABARRwAugMCQEIQAACEEABIwMQgAAEIACBBARQwAmgMyQEIAABCEAABYwMQAACEIAABBIQQAEngM6QEIAABCAAARQwMgABCEAAAhBIQAAFnAA6Q0IAAhCAAARQwMgABCAAAQhAIAEBFHAC6AwJAQhAAAIQQAEjAxCAAAQgAIEEBFDACaAzJAQgAAEIQAAFjAxAAAIQgAAEEhBAASeAzpAQgAAEIAABFDAyAAEIQAACEEhAAAWcADpDQgACEIAABFDAyAAEIAABCEAgAQEUcALoDAkBCEAAAhBAASMDEIAABCAAgQQEUMAJoDMkBCAAAQhAAAWMDEAAAhCAAAQSEEABJ4DOkBCAAAQgAAEUMDIAAQhAAAIQSEAABZwAOkNCAAIQgAAEUMDIAAQgAAEIQCABARRwAugMCQEIQAACEEABIwMQgAAEIACBBARQwAmgMyQEIAABCEAABYwMQAACEIAABBIQQAEngM6QEIAABCAAARQwMgABCEAAAhBIQAAFnAA6Q0IAAhCAAARQwMgABCAAAQhAIAEBFHAC6AwJAQhAAAIQQAEjAxCA.....
}

Запрос не обнаруживает эти данные json в теле и возвращает ошибку:

{
    "image": "\"image\" is required"
}

Также попробовал метод отправки form_data таким образом:

var axios = require('axios');
      var FormData = require('form-data');
      // var fs = require('fs');
      var data = new FormData();
      data.append('image', formdata.logoFinalImage);

      var config = {
        method: 'post',
        url: myurl,
        headers: {
          'Authorization': this.state.token,
          'Content-Type': 'application/json'
        },
        data: data
      };

      axios(config)
        .then(function (response) {
          console.log(JSON.stringify(response.data));
        })
        .catch(function (error) {
          console.log(error);
        });

Та же проблема. Как я могу отправить окончательную обрезанную версию в конечную точку api узла?

Я думаю, что вы не создаете URL-адрес base64, это просто метаданные. Вы можете проверить эту ссылку: stackoverflow.com/questions/26360403/   —  person adeab    schedule 26.01.2021

не могли бы вы добавить снимок экрана почтальона, как вы его добавляете, и делаете ли ваш продукт, кроме данных в виде формы или тела json?   —  person adeab    schedule 26.01.2021

@PD Скрыть тело JSON. Вот SS: ibb.co/g4bTDMp   —  person adeab    schedule 26.01.2021

@ApoorvaChikara Я использую эту строку для предварительного просмотра изображения в моем интерфейсе vue js. И эта строка создается с помощью функции readAsDataURL (file). Что еще нужно сделать, чтобы сделать его base64?   —  person adeab    schedule 26.01.2021

@PDHide также пробовал использовать формат данных. Сообщение обновлено соответственно   —  person adeab    schedule 26.01.2021

См. также:  AWS sam SES sendEmail возвращает InvalidClientTokenId (nodejs / lambda)

У вас получится заставить его работать в почтальоне?   —  person adeab    schedule 26.01.2021

@PDHide нет. в почтальоне, когда я загружаю файл в формате formdata, он работает. но когда я пытаюсь заменить функцию fs.createStream моей строкой base64, она не работает. Кроме того, чтобы проверить, действительно ли моя строка base64 в порядке, я вставил эту строку в онлайн-конвертер base64 в изображение, и его изображение отлично генерируется.   —  person adeab    schedule 26.01.2021

Понравилась статья? Поделиться с друзьями:
IT Шеф
Комментарии: 2
  1. adeab

    если он работает в почтальоне, вы можете создать код из самого почтальона, выбрать код и выполнить поиск по аксиомам

    v8<

    введите описание изображения здесь

    при использовании v8

    введите описание изображения здесь

    да, я могу это сделать. но дело в том, что поскольку я делаю изображение в своем интерфейсе в формате base64, мне нужно отправить строку base64 вместо файла изображения, который вы отправили туда. Это не работает. Вот в чем проблема person adeab; 27.01.2021

  2. adeab

    Решил вопрос. Это можно было сделать двумя способами. Требуются изменения в бэкэнде, чтобы настроить код таким образом, чтобы он мог получать base64 и преобразовывать его в изображение. Ссылка: https://medium.com/js-dojo/how-to-upload-base64-images-in-vue-nodejs-4e89635daebc.

    Другой — создать файл изображения base64, а затем отправить его на бэкэнд как данные формы. Использовал это в моем случае. Ссылка на это решение: https://gist.github.com/ibreathebsb/a104a9297d5df4c8ae944a4ed149bcf1

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: