Проблема с загрузкой изображения с помощью axios - PullRequest
Новая
       32

Проблема с загрузкой изображения с помощью axios

1 голос
/ 20 сентября 2019

Я пытаюсь отправить изображение на свой сервер, используя axios с реактивом-родным.

Для этого я передаю данные изображения (данные изображения в кодировке Base 64) непосредственно в *Функция 1003 *, которая использует axios таким образом: 

const uploadPicture = async (data): Promise<AxiosResponse<string>> => {
  const response = publicApi.post(
    `${API_URL}/upload`,
    {
      image: data,
    },
    {
      headers: { 'Content-Type': 'multipart/form-data' },
      transformRequest: [transformToFormData],
    }
  );

  return response;
};

const transformToFormData: AxiosTransformer = data => {
  const formData = new FormData();
  for (const key in data) {
    formData.append(key, data[key]);
  }
  return formData;
};

Проблема, с которой я сталкиваюсь:

Я получаю внутреннюю ошибку, например, если мое изображение не было правильно передано черезмой запрос.

Если я делаю точно такой же запрос с использованием Postman, он работает нормально, настраивая тело следующим образом:

enter image description here

Что заставляет меня думать, что проблема не в моем сервере, а в моем запросе axios.

Есть идеи, что я могу делать неправильно?Я где-то пропускаю какой-либо параметр axios?

1 Ответ

0 голосов
/ 30 сентября 2019

Мне удалось найти решение:

  • Я использовал функцию fetch из javascript вместо axios
  • Я отправляю объект файла вместо данных напрямую
  • Мне пришлось отключить проверку реактивной сети, иначе загрузка не будет работать

Мое рабочее решение ниже, image - ответ сборщика реагирующих изображений: 

const file = {
    uri: image.uri,
    name: image.fileName,
    type: image.type,
    size: image.fileSize,
    slice: () => new Blob(),
  };

  const body = new FormData();
  body.append('image', file);

  const response = await fetch(`${API_URL}/upload`, {
    method: 'POST',
    body,
  });
...