导航到 url 时，Azure Blob 始终会下载

Question

在我们的应用程序中，我们使用户能够将文档上传到 Windows azure blob 存储帐户。上传文档或图像后，它会被分配一些 url (https://name.blob.core.windows.net/container/file-name.jpg)。如果文档是图像、pdf 或某些可以由浏览器呈现的文件，我们会尝试在浏览器中显示它，而不要求用户下载该文件。如果我们只是打开一个新窗口或选项卡并将用户定向到 IE 中的 blob uri，则图像或 pdf 会在浏览器中正确呈现。但是，如果我们尝试在 Chrome、FireFox 或 Safari 中打开一个指向 uri 的新窗口，它只会下载文件，而不是在浏览器中显示它。

有没有办法强制后三种浏览器只显示文件而不下载文件？

Answer 1

这是因为您没有设置 blob 的 content type 属性（默认为 application/octet-stream，这会在大多数浏览器中触发下载）。如果您希望 PDF 文件正确显示，您需要将 PDF 文件的内容类型更改为 application/pdf（对于 jpeg 文件为 image/jpeg）。

您可以使用 Azure Storage Explorer、Cloud Storage Studio、CloudBerry、CloudXplorer 等常用工具或使用 SDK 来更改内容类型。请注意，其中一些工具会在上传文件后自动将内容类型设置为正确的类型。

Answer 2

   blob.Properties.ContentType = "application/pdf";

//通过扩展名获取文件的内容类型

    public static string GetFileContentType(string FilePath)
    {
        string ContentType = String.Empty;
        string Extension = Path.GetExtension(FilePath).ToLower();

        switch (Extension)
        {
            case ConstantUtility.FILE_EXTENSION_PDF:
                ContentType = "application/pdf";
                break;
            case ConstantUtility.FILE_EXTENSION_TXT:
                ContentType = "text/plain";
                break;
            case ConstantUtility.FILE_EXTENSION_BMP:
                ContentType = "image/bmp";
                break;
            case ConstantUtility.FILE_EXTENSION_GIF:
                ContentType = "image/gif";
                break;
            case ConstantUtility.FILE_EXTENSION_PNG:
                ContentType = "image/png";
                break;
            case ConstantUtility.FILE_EXTENSION_JPG:
                ContentType = "image/jpeg";
                break;
            case ConstantUtility.FILE_EXTENSION_JPEG:
                ContentType = "image/jpeg";
                break;
            case ConstantUtility.FILE_EXTENSION_XLS:
                ContentType = "application/vnd.ms-excel";
                break;
            case ConstantUtility.FILE_EXTENSION_XLSX:
                ContentType = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
                break;
            case ConstantUtility.FILE_EXTENSION_CSV:
                ContentType = "text/csv";
                break;
            case ConstantUtility.FILE_EXTENSION_HTML:
                ContentType = "text/html";
                break;
            case ConstantUtility.FILE_EXTENSION_XML:
                ContentType = "text/xml";
                break;
            case ConstantUtility.FILE_EXTENSION_ZIP:
                ContentType = "application/zip";
                break;
            default:
                ContentType = "application/octet-stream";
                break;

        }


        return ContentType;
    }

使用它在保存时设置 blob 的内容类型。

设置存储在 Blob 上的媒体文件的内容类型

Answer 3

对于通过 PowerShell 上传文件的用户，请在上传过程中使用以下语法设置内容类型。

Set-AzureStorageBlobContent -File <localFilePath> -Container <containerName> -Properties @{"ContentType"="text/plain"} -Context $ctx

上面我将 blob 内容类型设置为 text/plain，这在上传将与模板一起使用的 JSON 和 HTML 文件时很有用。更多内容类型标题值列表此处。

Answer 4

如果使用 Azure SDK (12.x+)，则需要使用传递到上传方法的 BlobHttpHeaders（而不是 blob.Properties.ContentType）。

例如：

    var header = new BlobHttpHeaders();
    header.ContentType = "image/jpeg";

    var response = await blobClient.UploadAsync(stream, header);

Answer 5

我有类似的问题，想通过 Twilio Whatsapp API 发送 OGG（语音消息）。

对我来说，这解决了问题：

const data = fs.readFileSync(audioFilePath);

    // Setting the content type as audio/ogg
    
    const uploadOptions = {
        blobHTTPHeaders: {
            blobContentType: 'audio/ogg',
        },
    };


 const uploadBlobResponse = await blockBlobClient.upload(data, data.length, uploadOptions);

Answer 6

感谢 sudhAnsu63 和 Steve G 提供的有用答案！

这是 Visual Basic 中的最小可重现代码解决方案，它通过调用函数“uploadImageBlob”来设置 ContentType 并上传到 azure blob 存储，设置内容类型将帮助浏览器了解如何处理图像，这样它就可以显示图像/文件，而不是在访问时开始下载。

顺便说一句，我不会只是将其复制并粘贴到您的代码中，并且希望您以更好、更动态的方式处理连接字符串和文件名。

            Public Function uploadImageBlob() As String
                ' variables we will need in this function
                Const containerName As String = "exampleContainer"
                Dim azureConnectionString As String = WebConfigurationManager.ConnectionStrings("NameOfConnectionString").ConnectionString

                Dim fileNameWithExtension As String = "example.png"
                Dim filePath As String = "/WhereYourImagesAre/"

                ' requires being able to use path
                Dim blobName As String = Path.GetFileNameWithoutExtension(fileNameWithExtension)

                Dim container As BlobContainerClient = New BlobContainerClient(AzureConnectionString, containerName)
                container.CreateIfNotExists()

                Dim blob As BlobClient = container.GetBlobClient(fileNameWithExtension)

                Dim blobHeader = New Models.BlobHttpHeaders
                blobHeader.ContentType = Me.getFileContentType(fileNameWithExtension) '("image/png")

                blob.UploadAsync(filePath & fileNameWithExtension, blobHeader)
                return "bob upload!!!"
            End Function

            Public Function getFileContentType(pFileWithExtension As String) As String
                Dim ContentType As String = String.Empty
                Dim Extension As String = Path.GetExtension(FilePath).ToLower()
                
                ' may want more extension types based on your needs
                Select Case Extension
                    Case ".gif"
                        ContentType = "image/gif"
                    Case ".jpg"
                        ContentType = "image/jpeg"
                    Case ".jpeg"
                        ContentType = "image/jpeg"
                    Case ".png"
                        ContentType = "image/png"
                End Select
                
                return ContentType;
            End Function