Chrome Azure Blob在导航到URL时始终下载

r7s23pms  于 11个月前  发布在  Go
关注(0)|答案(6)|浏览(139)

在我们的应用程序中,我们给予用户将文档上传到windows azure blob存储帐户的能力。(网址://name.blob.core.windows.net/container/file-name.jpg)。如果文档是图像或pdf或浏览器可以渲染的某些文件,我们试图在浏览器中显示它而不需要用户下载文件。如果我们只是打开一个新窗口或选项卡并将用户定向到IE中的blob uri,则图像或pdf在浏览器中正确渲染。但是,如果我们试图在Chrome中打开一个指向uri的新窗口,Firefox或Safari,它只是下载文件,而不是在浏览器中显示它。
有没有办法强制后三种浏览器只显示文件而不下载?

pdtvr36n

pdtvr36n1#

这是因为您没有设置blob的content type属性(默认值为application/octet-stream,在大多数浏览器中会触发下载)。如果您希望PDF文件正确显示,您需要将PDF文件的内容类型更改为application/pdf(对于jpeg文件,为image/jpeg)。
您可以使用Azure Storage Explorer、Cloud Storage Studio、CloudBerry、CloudXplorer等常用工具或使用SDK更改内容类型。请注意,其中一些工具会在上传文件后自动将内容类型设置为正确的类型。

py49o6xq

py49o6xq2#

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的内容类型。
Set Content-type of media files stored on Blob

esyap4oy

esyap4oy3#

对于那些通过PowerShell上传文件,使用下面的语法在上传过程中设置内容类型。

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

字符串
上面我将blob内容类型设置为text/plain,这在上传将与模板一起使用的JSON和HTML文件时很有用。更多内容类型头值列表here

fruv7luv

fruv7luv4#

如果使用Azure SDK(12.x+),则需要使用传递到上传方法的BlobHttpHeaders(而不是blob.Properties.ContentType)。
举例来说:

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

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

字符串

eiee3dmh

eiee3dmh5#

我有一个类似的问题,想通过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);

字符串

pxq42qpu

pxq42qpu6#

感谢sudhAnsu 63和Steve G提供有用的答案!
这里是一个最小的可复制的代码解决方案,在Visual Basic中设置ContentType并通过调用函数“uploadImageBlob”上传到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

字符串

相关问题