如何修复 next.js 上 Azure 存储 blob 的导入错误？

Question

我正在尝试从我的 Azure 存储 Blob 容器下载视频和缩略图。由于某种原因，我一直在下面收到此错误。

我正在使用 next.js 来执行此操作。我使用的

@azure/storage-blob

是最新的。我尝试了旧版本，但遇到了同样的错误。

我做错了什么以及如何解决它？

错误

Attempted import error: 'StorageSharedKeyCredential' is not exported from '@azure/storage-blob' (imported as 'StorageSharedKeyCredential').

Attempted import error: 'SASProtocol' is not exported from '@azure/storage-blob' (imported as 'SASProtocol').

Attempted import error: 'generateBlobSASQueryParameters' is not exported from '@azure/storage-blob' (imported as 'generateBlobSASQueryParameters').

Attempted import error: 'ContainerSASPermissions' is not exported from '@azure/storage-blob' (imported as 'ContainerSASPermissions').

代码

"use client"; 

import { BlobServiceClient, ContainerSASPermissions, SASProtocol, StorageSharedKeyCredential, generateBlobSASQueryParameters } from '@azure/storage-blob';

const accountName: string = process.env.AZURE_ACCOUNT_NAME || "";
const accountKey: string = process.env.AZURE_BLOB_ACCESS_KEY || "";

const sharedKeyCredential = new StorageSharedKeyCredential(accountName, accountKey);

console.log("Shared key: ", sharedKeyCredential);

const blobServiceClient = new BlobServiceClient(`https://${accountName}.blob.core.windows.net`, sharedKeyCredential);

const containerName: string = process.env.AZURE_CONTAINER_NAME || "";

const container_client = blobServiceClient.getContainerClient(containerName);
const THUMBNAIL_FOLDER_PATH: string = "/thumbnail/"
const VIDEO_FOLDER_PATH: string = "/video/"


async function get_thumbnail_from_blob(thumbnail_name: string) {

    const blob_client = container_client.getBlobClient(thumbnail_name);
    const blob_data = await blob_client.download(0);

    return blob_data;

}

async function get_video_from_blob(vidoe_name: string) {

    const blob_client = container_client.getBlobClient(vidoe_name);

    const sasOptions = {
        containerName,
        protocol: SASProtocol.Https,
        permission: ContainerSASPermissions.parse('r').toString(),
        expiresOn: new Date(new Date().valueOf() + 3600 * 1000)
    };

    const sasToken = generateBlobSASQueryParameters(sasOptions, sharedKeyCredential).toString();

    return `${blob_client.url}?${sasToken}`;
}


const getBlobs = async(containerBlobName: string) => {

    const blobs: Array<any> = [];
    const blob_names: string[] = [];

    const blob_list = container_client.listBlobsFlat();

    const loader = {
        [THUMBNAIL_FOLDER_PATH]: get_thumbnail_from_blob,
        [VIDEO_FOLDER_PATH]: get_video_from_blob
    };

    const loaderFunction = loader[containerBlobName];

    for await (const blob of blob_list) {
        blobs.push(await loaderFunction(blob.name));
        blob_names.push(blob.name);
    }

    return [blobs, blob_names]

}


export const get_thumbnails = async () => {
    const [thumbnails, thumbnail_names] = await getBlobs(THUMBNAIL_FOLDER_PATH);

    console.log("thumbnail: ", thumbnail_names);
    return [thumbnails, thumbnail_names]
}


export const get_videos = async () => {
    const [videos, video_names] = await getBlobs(VIDEO_FOLDER_PATH);
    return [videos, video_names]
}

Answer 1

我相信您收到此错误是因为您在客户端运行代码（使用

"use client"

指令），并且这些工件仅在 Node 运行时可用。

您需要将生成 SAS 令牌的代码移至服务器端。如果您的代码打算在服务器上运行，请从代码中删除

"use client"

指令，这样您就不会收到错误。