Давай приступим к работе
Прежде всего, у вас должна быть уже создана учетная запись 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.
Спасибо!
Не стесняйтесь критиковать мой код и сообщать мне, если что-то не так. Я всегда стремлюсь стать лучше и не забываю следить за мной в Твиттере!