Как проверить, загружены ли изображения на AWS S3 и получить его по URL в теге <img> - PullRequest
Новая
       0

Как проверить, загружены ли изображения на AWS S3 и получить его по URL в теге <img>

0 голосов
/ 19 сентября 2019

В моем проектеactjs / nextjs / serverjs я загружал изображения, когда создавал какой-то элемент, после создания элемента я перенаправляю на страницу с подробностями.У него есть слайдер с этими изображениями.Но я думаю, эти загрузки асинхронно.На стороне сервера я использую этот код: 

router.post('/aws-upload-image', (req, res) => {
   const { awsFolder, fileNames } = req.body;
   fileNames.forEach((el) => {
     s3.putObject({
        Bucket: S3_BUCKET,
        Body: fs.readFileSync(`./uploads/${el}`),
        Key: `${awsFolder}/${el}`,
        ACL: 'public-read',
    })
    .promise()
    .then(() => {
        return res.json({
            success: true,
            message: null,
        });
    })
    .catch((err) => {
        console.error('failed:', err)
        return res.status(status.NOT_FOUND).json({
            success: false,
            message: 'Can\'t upload file to AWS',
        });
    })
  });
});

На клиенте я использую Slider (pure-реагировать на карусель): 

return (
        <CarouselProvider
            naturalSlideWidth={100}
            naturalSlideHeight={125}
            totalSlides={totalSlides}
            isPlaying={playOn}
            interval={3000}
            visibleSlides={3}
        >
            <Slider>
                {
                    images && images.map((item, i) => {
                        return <Slide index={i} className='w-1/3'>
                            <LazyLoad
                                debounce={false}>
                                    <ImageLoader
                                        className='h-64'
                                        src={this.getPreview(item.get('imgUrl'))} alt='preview'/>
                            </LazyLoad>
                        </Slide>
                    })
                }
            </Slider>
        </CarouselProvider>
    );

** Функция getPreview возвращает URL-адрес изображения (строка);Также я использую пакет response-lazy-load

Моя проблема: маленькие изображения будут отображаться, большие - нет (асинхронная загрузка в AWS), я хочу быстро показать страницу с подробностями после сохранения элемента в БД и показать на слайдере несколькослайд, когда он станет доступным.

Каков наилучший способ сделать это?Можно ли сделать какой-то рекурсивный вызов от клиента к API AWS и повторять его до тех пор, пока к образу не будет получен доступ?Я впервые работаю с AWS.Прошу вашей помощи

...