Получение изображения из azure-blob и отправка его клиенту без локального сохранения с помощью сервера узла

Я хочу получить изображение из хранилища Azure blob и отправить его клиенту, не сохраняя его локально. Я могу получить изображение из хранилища BLOB-объектов и сохранить его в локальный файл, но изо всех сил пытаюсь отправить его клиенту без сохранения локально. Пожалуйста, найдите код ниже

    const containerClient = blobServiceClient.getContainerClient(containerName);
    const blockBlobClient = containerClient.getBlobClient(blobName);

    const downloadBlockBlobResponse = await blockBlobClient.download(0);
    console.log('\nDownloaded blob content...');
    let f = await streamToString(downloadBlockBlobResponse.readableStreamBody)
    
    reply.type('image/jpg').send(f)

Функция streamToString выглядит следующим образом

     async function streamToString(readableStream) {
        return new Promise((resolve, reject) => {
        const chunks = [];
        readableStream.on("data", (data) => {
            chunks.push(data.toString());
        });
        readableStream.on("end", () => {
            resolve(chunks.join(""));
        });
        readableStream.on("error", reject);
     });
}

Когда я запускаю этот код, в браузере появляется пустой экран

введите описание изображения здесь


node.js angular azure-blob-storage fastify
person Niraj Gawande    schedule 20.10.2020    source источник
comment
Вы можете попробовать reply.type('image/jpg').send(downloadBlockBlobResponse.readableStreamBody)   -  person Manuel Spigolon    schedule 20.10.2020
comment
Подскажите, пожалуйста, как показать изображение во фронтенде?   -  person Jim Xu    schedule 20.10.2020
comment
Если интерфейс только отображается, его можно преобразовать в формат base64, если вам нужно скачать, используйте поток.   -  person Jason Pan    schedule 21.10.2020
comment
Как дела? Ваша проблема решена?   -  person Stanley Gong    schedule 27.10.2020

Ответы (1)


arrow_upward
1
arrow_downward

Если вы хотите получить изображение из хранилища BLOB-объектов Azure и отправить его клиенту, не сохраняя его локально, сервер Node отправляет SAS-токен клиенту, и клиент получает этот образ напрямую из хранилища Azure, будет лучшим решением. Это также снижает нагрузку на сервер Node: генерировать токен SAS и отправлять его клиенту нормально, нет необходимости читать данные из хранилища.

Попробуйте использовать приведенный ниже код, чтобы сгенерировать токен SAS:

var azure = require('azure-storage');
    var connString = "your storage connection string";
    var container ="your container name";
    var blobName = "your image name"
    var blobService = azure.createBlobService(connString);

    // Create a SAS token that expires in an hour
    // Set start time to five minutes ago to avoid clock skew.
    var startDate = new Date();
    startDate.setMinutes(startDate.getMinutes() - 5);
    var expiryDate = new Date(startDate);
    expiryDate.setMinutes(startDate.getMinutes() + 60);
    


    var sharedAccessPolicy = {
        AccessPolicy: {
            Permissions: [azure.BlobUtilities.SharedAccessPermissions.READ],  //grent read permission only
            Start: startDate,
            Expiry: expiryDate
        }
    };
    
    var sasToken = blobService.generateSharedAccessSignature(container, blobName, sharedAccessPolicy);
    
    var response = {};

    response.image = blobService.getUrl(container,blobName,sasToken);
    
    res.send(response);

Результат: введите описание изображения здесь

Клиентская сторона может использовать этот URL-адрес изображения для доступа к этому изображению непосредственно из хранилища:

введите описание изображения здесь

Попробуйте это преобразовать imageURL в содержимое изображения base64, чтобы вы могли сохранять / показывать изображения непосредственно на основе их содержимого:

<html>

<body>
    <img id="displayImg">
</body>


<script>

var nodeResult = {"image":"https://stantest1016.blob.core.windows.net/stantest/test.jpeg?st=2020-10-26T04%3A53%3A51Z&se=2020-10-26T05%3A53%3A51Z&sp=r&sv=2018-03-28&sr=b&sig=ZjY3LYbgvMn%2BSr4dAEUoqidVRT4YyH1FcW1DeKlpjYo%3D"}


function getImageData(nodeResult){


var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        var reader = new FileReader();
        reader.readAsDataURL(this.response);
        reader.onload = function() {
            document.getElementById('displayImg').src = reader.result;
        }
  };
    
   
    
  };
  xhr.open('GET', nodeResult.image);
  xhr.responseType = 'blob';
  xhr.send();

}


getImageData(nodeResult);
</script>

</html>

Результат:

введите описание изображения здесь

Подробная информация о теге: введите описание изображения здесь

person Stanley Gong    schedule 23.10.2020
comment
Мне понравился ваш подход. Спасибо за это. Однако URL-адреса изображений упоминаются в редакторе форматированного текста и сохраняются в базе данных в виде HTML. Здесь сложно следовать этому подходу. Что здесь можно сделать? - person Niraj Gawande; 26.10.2020
comment
Привет, @NirajGawande, если вы хотите получить содержимое изображения вместо URL-адреса изображения в вашем случае использования, вы можете просто загрузить это изображение по URL-адресу изображения сначала на стороне клиента и преобразовать это изображение в base64, а затем отобразить это изображение, я обновил мой ответ. - person Stanley Gong; 26.10.2020
comment
Спасибо @stanley, это помогло мне пройти - person Niraj Gawande; 29.10.2020