Блог

Я работаю над приложением React Native, в котором мне требуется загружать изображение или видео в учетную запись хранилища Azure в виде большого двоичного объекта. В настоящее время я работаю над загрузкой изображений, но я хотел бы добавить видео в этот вопрос, поскольку видео будет следующим шагом. Я перепробовал так много способов загрузки изображения в хранилище Azure, но я не могу правильно загрузить изображение из приложения RN с помощью Axios. Я генерирую URL-адрес загрузки с помощью токена SAS, чтобы я мог поделиться этим URL-адресом с внутреннего сервера с устройством, чтобы иметь возможность загружать изображение или видео с устройства. Раньше я Postman тестировал URL-адрес, и там все в порядке! С Postman помощью я могу загружать изображение в виде двоичного тела. Я использовал Postman генерацию кода, которая показывает Axios пример кода, но я не уверен, что это означает под содержимым файла здесь. Позвольте мне сделать небольшую резервную копию.

В этом приложении React Native я использую средство выбора изображений react-native для выбора изображения из галереи и передачи пути к вспомогательному классу, и я использую react-native-fs для получения изображения, просто чтобы убедиться, что оно существует, и все такое, а также я получаю base64 строку из RNFS. Теперь у меня есть как путь к изображению, так и строка base64 изображения, которые я хочу загрузить на сервер Azure с помощью Axios. Я попробовал несколько вещей. Одним из примеров является пример кода от postman, но, как я уже сказал, я не уверен, как передать содержимое файла в качестве объекта данных, показанного в примере кода, который,

 const axios = require('axios');
let data = '<file contents here>'; // <--- I don't know this

let config = {
  method: 'put',
  url: 'https://azure.blob.url/container/blob?sastoken=1234',
  headers: { 
    'x-ms-blob-type': 'BlockBlob', 
    'Content-Type': 'image/jpeg'
  },
  data : data
};

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

 

Я искал ответ в Интернете, чтобы узнать, сделал ли кто-нибудь это или нет! Ну, я нашел так много примеров кода, но ни один из них не сработал для меня. Возможно, я делаю что-то не так, но я не знаю, что. Один из способов, который я пробовал, состоял в том, чтобы использовать fetch() , передавая как base64 строку, так и путь с помощью file:// (в настоящее время ориентируясь на Android, чтобы заставить код работать, и будет работать на части iOS позже, но я был бы признателен, если пример кода / предложение / справка могут быть как для Android, так и для iOS) по-разному, чтобы получить большой двоичный объект и использовать его какобъект данных в Axios, и он все еще не работал!

Одним из других вариантов, которые я пробовал, было использовать RNFS.upload() , как предложено здесь . Это не сработало для моего теста, так как он завершился ошибкой, и здесь на Github возникла проблема. В разговоре упоминается исправление, которое можно найти здесь . Но он не объединен в основную ветку, и я не знаю, как установить этот патч, плюс я бы предпочел работать с исправленной версией.

Помимо этих методов, я попробовал FormData() и несколько других способов, которых у меня на данный момент нет. пример кода. Поэтому я ищу помощи здесь, разместив свой собственный вопрос с надеждой получить помощь, и в будущем, если кто-то пытается выполнить аналогичные действия, они могут найти помощь!