Självstudie: Ladda upp bilddata i molnet med Azure Storage

Skapa en resursgrupp med kommandot New-AzResourceGroup. En Azure-resursgrupp är en logisk container där Azure-resurser distribueras och hanteras.

New-AzResourceGroup -Name myResourceGroup -Location southeastasia

Skapa en resursgrupp med kommandot az group create. En Azure-resursgrupp är en logisk container där Azure-resurser distribueras och hanteras.

az group create --name myResourceGroup --location southeastasia

Skapa ett lagringskonto i resursgruppen som du skapade med kommandot New-AzStorageAccount.

$blobStorageAccount="<blob_storage_account>"

New-AzStorageAccount -ResourceGroupName myResourceGroup -Name $blobStorageAccount -SkuName Standard_LRS -Location southeastasia -Kind StorageV2 -AccessTier Hot

Skapa ett lagringskonto i resursgruppen du skapade med hjälp av kommandot az storage account create.

blobStorageAccount="<blob_storage_account>"

az storage account create --name $blobStorageAccount --location southeastasia \
  --resource-group myResourceGroup --sku Standard_LRS --kind StorageV2 --access-tier hot

Hämta lagringskontonyckeln med hjälp av kommandot Get-AzStorageAccountKey. Använd sedan den här nyckeln för att skapa två containrar med kommandot New-AzStorageContainer.

$blobStorageAccountKey = (Get-AzStorageAccountKey -ResourceGroupName myResourceGroup -Name $blobStorageAccount).Key1
$blobStorageContext = New-AzStorageContext -StorageAccountName $blobStorageAccount -StorageAccountKey $blobStorageAccountKey

New-AzStorageContainer -Name images -Context $blobStorageContext
New-AzStorageContainer -Name thumbnails -Permission Container -Context $blobStorageContext

Hämta nyckeln till lagringskontot med kommandot az storage account keys list. Sedan använder du den här nyckeln för att skapa två containrar med kommandot az storage container create.

blobStorageAccountKey=$(az storage account keys list -g myResourceGroup \
  -n $blobStorageAccount --query "[0].value" --output tsv)

az storage container create --name images \
  --account-name $blobStorageAccount \
  --account-key $blobStorageAccountKey

az storage container create --name thumbnails \
  --account-name $blobStorageAccount \
  --account-key $blobStorageAccountKey --public-access container

Skapa en App Service plan med kommandot New-AzAppServicePlan.

New-AzAppServicePlan -ResourceGroupName myResourceGroup -Name myAppServicePlan -Tier "Free"

Skapa en App Service-plan med kommandot az appservice plan create.

az appservice plan create --name myAppServicePlan --resource-group myResourceGroup --sku Free

Skapa en webbapp i myAppServicePlan App Service plan med kommandot New-AzWebApp.

$webapp="<web_app>"

New-AzWebApp -ResourceGroupName myResourceGroup -Name $webapp -AppServicePlan myAppServicePlan

Skapa en webbapp i myAppServicePlan App Service-planen med kommandot az webapp create.

webapp="<web_app>"

az webapp create --name $webapp --resource-group myResourceGroup --plan myAppServicePlan

App Service har stöd för flera olika sätt att distribuera innehåll till en webbapp. I de här självstudierna distribuerar du webbappen från en offentlig GitHub exempellagringsplats. Konfigurera lokal Git-distribution till webbappen med kommandot az webapp deployment source config-local-git.

Exempelprojektet innehåller en ASP.NET MVC-app. Appen accepterar en bild, sparar den till ett lagringskonto och visar bilder från en container med miniatyrer. Webbappen använder Azure.Storage, Azure.Storage. Blobaroch Azure.Storage. Blobs.Models-namnrymder för att interagera Azure Storage tjänsten.

az webapp deployment source config --name $webapp --resource-group myResourceGroup \
  --branch master --manual-integration \
  --repo-url https://github.com/Azure-Samples/storage-blob-upload-from-webapp

az webapp deployment source config --name $webapp --resource-group myResourceGroup `
  --branch master --manual-integration `
  --repo-url https://github.com/Azure-Samples/storage-blob-upload-from-webapp

App Service har stöd för flera olika sätt att distribuera innehåll till en webbapp. I de här självstudierna distribuerar du webbappen från en offentlig GitHub exempellagringsplats. Konfigurera lokal Git-distribution till webbappen med kommandot az webapp deployment source config-local-git.

az webapp deployment source config --name $webapp --resource-group myResourceGroup \
  --branch master --manual-integration \
  --repo-url https://github.com/Azure-Samples/azure-sdk-for-js-storage-blob-stream-nodejs

az webapp deployment source config --name $webapp --resource-group myResourceGroup `
  --branch master --manual-integration `
  --repo-url https://github.com/Azure-Samples/azure-sdk-for-js-storage-blob-stream-nodejs

Exempelwebbappen använder de Azure Storage API:erna för .NET för att ladda upp bilder. Storage kontoautentiseringsuppgifter anges i appinställningarna för webbappen. Lägg till appinställningar i den distribuerade appen med kommandot az webapp config appsettings set eller New-AzStaticWebAppSetting.

az webapp config appsettings set --name $webapp --resource-group myResourceGroup \
  --settings AzureStorageConfig__AccountName=$blobStorageAccount \
    AzureStorageConfig__ImageContainer=images \
    AzureStorageConfig__ThumbnailContainer=thumbnails \
    AzureStorageConfig__AccountKey=$blobStorageAccountKey

az webapp config appsettings set --name $webapp --resource-group myResourceGroup `
  --settings AzureStorageConfig__AccountName=$blobStorageAccount `
    AzureStorageConfig__ImageContainer=images `
    AzureStorageConfig__ThumbnailContainer=thumbnails `
    AzureStorageConfig__AccountKey=$blobStorageAccountKey

Exempelwebbappen använder Azure Storage för JavaScript för att ladda upp bilder. Autentiseringsuppgifterna för lagringskontot anges i appinställningarna för webbappen. Lägg till appinställningar i den distribuerade appen med kommandot az webapp config appsettings set eller New-AzStaticWebAppSetting.

az webapp config appsettings set --name $webapp --resource-group myResourceGroup \
  --settings AZURE_STORAGE_ACCOUNT_NAME=$blobStorageAccount \
    AZURE_STORAGE_ACCOUNT_ACCESS_KEY=$blobStorageAccountKey

az webapp config appsettings set --name $webapp --resource-group myResourceGroup `
  --settings AZURE_STORAGE_ACCOUNT_NAME=$blobStorageAccount `
  AZURE_STORAGE_ACCOUNT_ACCESS_KEY=$blobStorageAccountKey

Välj regionen Upload foton för att ange och ladda upp en fil, eller dra en fil till regionen. Bilden försvinner om överföringen lyckas. Avsnittet Genererade miniatyrer förblir tomt tills vi testar det senare i den här självstudien.

I exempelkoden används aktiviteten i filen UploadFileToStorage Storagehelper.cs för att ladda upp bilderna till containern images i lagringskontot med hjälp av metoden UploadAsync. Följande kodexempel innehåller aktiviteten UploadFileToStorage.

public static async Task<bool> UploadFileToStorage(Stream fileStream, string fileName,
                                                    AzureStorageConfig _storageConfig)
{
    // Create a URI to the blob
    Uri blobUri = new Uri("https://" +
                          _storageConfig.AccountName +
                          ".blob.core.windows.net/" +
                          _storageConfig.ImageContainer +
                          "/" + fileName);

    // Create StorageSharedKeyCredentials object by reading
    // the values from the configuration (appsettings.json)
    StorageSharedKeyCredential storageCredentials =
        new StorageSharedKeyCredential(_storageConfig.AccountName, _storageConfig.AccountKey);

    // Create the blob client.
    BlobClient blobClient = new BlobClient(blobUri, storageCredentials);

    // Upload the file
    await blobClient.UploadAsync(fileStream);

    return await Task.FromResult(true);
}

Följande klasser och metoder som används i den föregående aktiviteten:

Välj Välj fil för att välja en fil, och klicka sedan på Ladda upp bild. Avsnittet Genererade miniatyrer förblir tomt tills vi testar det senare i den här självstudien.

I exempelkoden ansvarar vägen post för att ladda upp bilden till en blob-container. Flödet använder moduler för att bearbeta uppladdningen:

• multiter implementerar överföringsstrategin för väghanteraren.
• into-stream konverterar bufferten till en dataström som krävs av uploadStream.

När filen skickas till vägen förblir filens innehåll i minnet tills filen har laddats upp till blob-containern.

if (process.env.NODE_ENV !== 'production') {
  require('dotenv').config();
}

const {
  BlobServiceClient,
  StorageSharedKeyCredential,
  newPipeline
} = require('@azure/storage-blob');

const express = require('express');
const router = express.Router();
const containerName1 = 'thumbnails';
const multer = require('multer');
const inMemoryStorage = multer.memoryStorage();
const uploadStrategy = multer({ storage: inMemoryStorage }).single('image');
const getStream = require('into-stream');
const containerName2 = 'images';
const ONE_MEGABYTE = 1024 * 1024;
const uploadOptions = { bufferSize: 4 * ONE_MEGABYTE, maxBuffers: 20 };

const sharedKeyCredential = new StorageSharedKeyCredential(
  process.env.AZURE_STORAGE_ACCOUNT_NAME,
  process.env.AZURE_STORAGE_ACCOUNT_ACCESS_KEY);
const pipeline = newPipeline(sharedKeyCredential);

const blobServiceClient = new BlobServiceClient(
  `https://${process.env.AZURE_STORAGE_ACCOUNT_NAME}.blob.core.windows.net`,
  pipeline
);

const getBlobName = originalName => {
  // Use a random number to generate a unique file name, 
  // removing "0." from the start of the string.
  const identifier = Math.random().toString().replace(/0\./, '');
  return `${identifier}-${originalName}`;
};

router.get('/', async (req, res, next) => {

  let viewData;

  try {
    const containerClient = blobServiceClient.getContainerClient(containerName1);
    const listBlobsResponse = await containerClient.listBlobFlatSegment();

    for await (const blob of listBlobsResponse.segment.blobItems) {
      console.log(`Blob: ${blob.name}`);
    }

    viewData = {
      title: 'Home',
      viewName: 'index',
      accountName: process.env.AZURE_STORAGE_ACCOUNT_NAME,
      containerName: containerName1
    };

    if (listBlobsResponse.segment.blobItems.length) {
      viewData.thumbnails = listBlobsResponse.segment.blobItems;
    }
  } catch (err) {
    viewData = {
      title: 'Error',
      viewName: 'error',
      message: 'There was an error contacting the blob storage container.',
      error: err
    };
    res.status(500);
  } finally {
    res.render(viewData.viewName, viewData);
  }
});

router.post('/', uploadStrategy, async (req, res) => {
  const blobName = getBlobName(req.file.originalname);
  const stream = getStream(req.file.buffer);
  const containerClient = blobServiceClient.getContainerClient(containerName2);;
  const blockBlobClient = containerClient.getBlockBlobClient(blobName);

  try {
    await blockBlobClient.uploadStream(stream,
      uploadOptions.bufferSize, uploadOptions.maxBuffers,
      { blobHTTPHeaders: { blobContentType: "image/jpeg" } });
    res.render('success', { message: 'File uploaded to Azure Blob Storage.' });
  } catch (err) {
    res.render('error', { message: err.message });
  }
});

module.exports = router;