Как загрузить несколько изображений в AWS S3 в родном приложении

В моей предыдущей статье я объяснил, как получить несколько изображений с помощью react-native-image-crop-picker , а в этом посте я расскажу, как загрузить эти изображения на сервер AWS S3.

Для этого я использовал react-native-aws3, эта библиотека не имеет нативных зависимостей, поэтому я предпочел ее другим библиотекам.

Установить react-native-aws3

Пожалуйста, зайдите на их веб-сайт, чтобы установить и настроить политику IAM, как указано.

Кнопка загрузки и onPress

Теперь я создал простую кнопку, подобную этой

<Button
  onPress={onUploadClick}
  title="Upload"
/>

как react-native-aws3 загружать одно изображение на S3 за раз, но у меня есть несколько изображений для загрузки, поэтому я использовал Promise.all.

const uploadButtonClick = () => {
   let promises = [];
   images.map((image, i) => {
     promises.push(uploadImageToS3(image));
   });
 }

Здесь я создал пустой массив обещаний для хранения каждого ответа на вызов загрузки. Затем я сопоставляю массив изображений для загрузки вызовов с одним изображением, и promises.push сохраняет этот ответ в массиве обещаний.

RNS3.put

Затем я определил свой uploadImageToS3 метод, подобный упомянутому в примере react-native-aws3.

const uploadImageToS3 = async image => {
  const options = {
    keyPrefix: "uploads/",
    bucket: "your-bucket",
    region: "us-east-1",
    accessKey: "your-access-key",
    secretKey: "your-secret-key",
    successActionStatus: 201
  }
  const file = {
    uri: `${image.path}`,
    name: image.path.substring(image.path.lastIndexOf('/') + 1), //extracting filename from image path
    type: image.mime,
  };
  return new Promise((resolve, reject) => {
    RNS3.put(file, options)
      .then(res => {
        if (res.status === 201) {
          const {postResponse} = res.body;
          resolve({
            src: postResponse.location,
          });
        } else {
          console.log('error uploading to s3', res);
        }
      })
      .catch(err => {
        console.log('error uploading to s3', err);
        reject(err);
      });
  });
};

Этот метод возвращает обещание URL/местоположения изображения в виде объекта, имеющего значение src.
Теперь я объединил все обещания с методом Promise.all

Promise.all(promises).then(uploadedImgs => {
  console.log('Yayy, all images are uploaded successfully', uploadedImgs)
});

массив uploadedImgs будет выглядеть так

[
  {
    src: 'https://<image-url>'
  },
  {
    src: 'https://<image-url>'
  },
]

В приведенном выше коде я отображаю только консольное сообщение, но мне нужен этот массив изображений для отправки на другой вызов API. Таким образом, вы можете использовать этот массив в своем состоянии или отправить его в базу данных в соответствии с вашими потребностями.

На сегодня все, спасибо за прочтение!