Давай приступим к работе

Прежде всего, у вас должна быть уже создана учетная запись AWS. Если вы этого еще не сделали, обязательно создайте его здесь.

Следующее, что вам нужно сделать, это создать проект мобильного хаба, если у вас его еще нет, перейдя сюда. Нажмите Создать и пройдите через мастер, следуя всем инструкциям, включая настройку aws ampify. Обратите внимание: если у вас возникнут проблемы на шаге 3, вы должны настроить свои учетные данные для aws-mobile.

Теперь, когда у вас настроен мобильный концентратор и подключен к внешнему интерфейсу, следующий шаг - вернуться в мобильный концентратор, щелкнуть свой проект, прокрутить вниз в разделе «Добавить дополнительные функции внутреннего интерфейса» и добавить «Хранилище пользовательских файлов». .

Хорошие новости!

Если на этом этапе ничего не взорвалось и все прошло хорошо, ваша серверная часть настроена и готова к работе! Если что-то взорвалось, оставьте комментарий, и я постараюсь вам помочь. Теперь мы готовы перейти к более интересным вещам!

Фронтенд

import { Storage } from "aws-amplify";

const storeFileInS3 = async (
  fileUri,
  awsKey = null,
  access = "public"
) => {
  const blob = await new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.onload = function() {
      resolve(xhr.response);
    };
    xhr.onerror = function() {
     reject(new TypeError("Network request failed"));
    };
    xhr.responseType = "blob";
    xhr.open("GET", fileUri, true);
    xhr.send(null);
  });
  const { name, type } = blob._data;
  const options = {
    level: access,
    contentType: type
  };
  const key = awsKey || name;
  try {
    const result = await Storage.put(key, blob, options);
    return {
      access,
      key: result.key
    };
  } catch (err) {
    throw err;
  }
};

То, что у меня здесь, очень просто. Это функция, которая принимает fileUri, который является URI для файла на устройстве, необязательный awsKey, чтобы объявить, какой ключ должен быть в AWS, и необязательный параметр access, который по умолчанию равен public. Подробнее об публичном, защищенном и частном доступе здесь.

Затем функция использует встроенную в React Native функцию fetch и вызывает .blob(); для получения результата.

Я использую Expo, и я захватываю только изображения и видео, поэтому в других функциях я делаю

const image = await Expo.ImagePicker.launchImageLibraryAsync();

и тогда у меня есть доступ к image.uri. Точно так же и с видео я просто делаю

const options = {mediaTypes: "Videos"};
const video = await Expo.ImagePicker.launchImageLibraryAsync(options);

и тогда у меня есть доступ к video.uri.

Затем достаточно просто передать uri, желаемый ключ и уровень доступа в storeFileInS3функцию, и вы увидите, что ваш файл загружен в S3.

Спасибо!

Не стесняйтесь критиковать мой код и сообщать мне, если что-то не так. Я всегда стремлюсь стать лучше и не забываю следить за мной в Твиттере!