Загрузите изображения в AWS S3 в React Native 0.60+

Мне не удалось найти руководства по работе с этой версией после версии 0.60, поэтому я написал свой собственный

Недавно я работал над несколькими проектами React Native, и одной из основных проблем, с которыми я столкнулся, было отсутствие поддержки библиотеки в версиях RN 0.60+ для загрузки изображений в сегменты AWS S3.

react-native-s3 и react-native-s3-upload - это библиотеки, которые я ранее использовал в своих проектах RN. Но поскольку версия RN выходит за рамки 0.60, я не мог использовать эти библиотеки. Однако я нашел способ загружать свои изображения в корзину AWS S3 с помощью библиотеки aws-sdk.

В этом примере мы будем использовать aws-sdk и react-native-image-picker.

Во-первых, вам необходимо установить в свой проект следующие библиотеки, используя npm или yarn. Вот ссылки на каждый из них на npm:

• aws-sdk
• react-native-image-picker
• base64-arraybuffer
• react-native-fs

npm i aws-sdk
npm i react-native-image-picker
npm i base64-arraybuffer
npm i react-native-fs

Затем вам нужно создать учетную запись AWS IAM и корзину S3, используя свою учетную запись AWS. Если вы не знаете, как создать пользователя IAM, обратитесь к этой статье. Единственные изменения, которые вам нужно сделать, - это назначить программный доступ вашему пользователю и установить разрешение AmazonS3FullAccess. Не забудьте сохранить идентификатор ключа доступа и секретный ключ доступа для потом.

Кроме того, вы можете просто выбрать сервис s3 в консоли AWS и создать корзину s3. Снимите флажок «Блокировать весь общий доступ» , чтобы сделать корзину общедоступной.

После создания корзины добавьте следующую политику в качестве политики корзины:

{
      “Version”: “2008–10–17”,
      “Statement”: 
              [
                 {
                   “Sid”: “AllowPublicRead”,
                   “Effect”: “Allow”,
                   “Principal”: 
                              {
                               “AWS”: “*”
                              },
                   “Action”: “s3:GetObject”,
                   “Resource”: “arn:aws:s3:::<bucket_name>/*”
                 }
               ]
}

Затем нам нужно реализовать метод выбора изображений из галереи или снятия с камеры с помощью встроенного средства выбора изображений React:

const chooseImage = async () => {
   
   let options = {
     title: ‘Upload Prescription’,
     takePhotoButtonTitle: ‘Take a Photo’,
     chooseFromLibraryButtonTitle: ‘Select From Gallery’,
     storageOptions: {
       skipBackup: true,
       path: ‘images’,
     },
   };
ImagePicker.showImagePicker(options, async (response) => {
   if (response.didCancel) {
     console.log(‘User cancelled image picker’);
   } else if (response.error) {
     console.log(‘ImagePicker Error: ‘, response.error);
   } else if (response.customButton) {
     console.log(‘User tapped custom button: ‘, response.customButton);
     alert(response.customButton);
   } else {
     const file = {
        uri: response.uri,
        name: response.fileName,
        type: ‘image/jpeg’,
     };
     uploadImageOnS3(file);
   }
});
};

В приведенном выше примере я включил только параметры Upload from the gallery и Take from Camera. Вы можете найти множество пользовательских опций в документации.

Теперь мы можем реализовать метод загрузки изображений:

const uploadImageOnS3 = async (file) => {
   const s3bucket = new S3({
     accessKeyId: <ACCESS_KEY_ID>,
     secretAccessKey: <SECRET_ACCESS_KEY>,
     Bucket: <BUCKET_NAME>,
     signatureVersion: 'v4',
   });
let contentType = 'image/jpeg';
   let contentDeposition = 'inline;filename="' + file.name + '"';
   const base64 = await fs.readFile(file.uri, 'base64');
   const arrayBuffer = decode(base64);
s3bucket.createBucket(() => {
     const params = {
       Bucket: <BUCKET_NAME>,
       Key: file.name,
       Body: arrayBuffer,
       ContentDisposition: contentDeposition,
       ContentType: contentType,
   };
s3bucket.upload(params, (err, data) => {
     if (err) {
       console.log('error in callback');
     }
   console.log('success');
   console.log("Respomse URL : "+ data.Location);
   });
 });
};

Здесь я преобразовал файл изображения в базу 64, используя файловый поток, а затем в буфер массива, потому что aws-sdk поддерживает несколько типов данных, таких как строки и буферы массивов, которые должны быть загружены с использованием этого.

Этот пример должен помочь вам упростить разработку функций загрузки изображений в проектах версии RN 0.60+.

Учить больше