Как преобразовать данные октетного потока в изображение base64 и отобразить в теге img, используя метод fetch - PullRequest
Новая
       25

Как преобразовать данные октетного потока в изображение base64 и отобразить в теге img, используя метод fetch

0 голосов
/ 19 апреля 2020

Я извлекаю изображение base64 из моего контейнера s3, используя следующий код. Первый метод извлечения возвращает предварительно заданный URL-адрес s3. Получить предварительно назначенный URL-адрес и преобразовать ответ в BLOB-объект. Когда я проверяю тип ответа, это поток октетов. У меня вопрос, как я могу преобразовать его в изображение base64 и отобразить его в теге img 

const profilePicFetchResult = await fetch('http://localhost/getUrl', {
    method: "POST",
    body: key,
    headers: {
        'Content-Type': 'application/json'
    }


})
const result = await profilePicFetchResult.text()
const fetched = await fetch(result, {
    method: "GET",
    mode: "cors",
    headers: {
        'Access-Control-Allow-Origin': '*',
    },
})
const imageBlob = await fetched.blob();

Переменная imageBlob равна 

Blob {size: 66026, type: "binary/octet-stream"}
size: 66026
type: "binary/octet-stream"
__proto__: Blob

Тег img html 

<img id="profile-image" src="https://trainerprofilepictures.s3.me-south-1.amazonaws.com/5e90603e7f0d251cab9253c6/1d70a21e-7c0e-4f12-92ae-84b3c85ecf1e" alt="">

sr c загружается, потому что корзина s3 является частной. Я должен получить его, используя предопределенные URL-адреса

Код сервера: 

function readObjectSignedUrl(req) {
return new Promise(function (resolve, reject) {
    s3.getSignedUrl('getObject', {
        Bucket: "pictures",
        Key: req,
        Expires: 6000
    }, (err, url) => {
        if (err) {
            reject(err);
        }
        else {

            resolve(url);
        }
    })
})

}

Файл маршрутизатора 

router.post('/getUrl',routerFunction.routerStatusFunction,trainerController.getObject)
...