Question

我是azure blob存储的新手，我正在尝试将图像上传到blob存储。我在客户端使用角度，并使用以下标题上传图像：

           'Content-type'
           'x-ms-blob-type'   
           'Content-Length'

我的blob已保存，我可以在Azure门户中看到它。但我无法看到图像。我无法理解原因。

我的客户的链接是http://educms.azurewebsites.net/#/pages/results

没有按钮。一旦选择了图像文件，它就会上传。您可以在https://hobcity.blob.core.windows.net/images2/filename.extension

看到上传的文件

上传AngularJs代码

       $scope.uploadFile = function(files) {
        var fd = new FormData();
        //Take the first selected file
        fd.append("file", files[0]);
        var size = files[0].size;
        var name = files[0].name;
        var type = files[0].type;
        var postData = {"name" : name};
        postData.containerName = 'images2';
        DataService.save('/tables/results/', postData).then(function(data){
          var header = {
                'Access-Control-Allow-Origin': '*',
                    'Content-type' : type,
                    'x-ms-blob-type' : 'BlockBlob',
                    'Content-Length' : size
            }
            var url = data.imageUri
            var queryString = data.sasQueryString
            var uploadUrl = url+ '/' + name + '/?'+queryString
            $http.put(uploadUrl, fd, {
            headers: header,
            transformRequest: angular.identity
        }).success(function(data){
                console.log(data)
            }).error(function(err){
                console.error(err);
            });

        });
    }

HTML：

代码可以在http://educms.azurewebsites.net/scripts/controllers/results.js

上看到

任何人都知道什么是错的？

Answer 1

所以我上传了一个简单的文本文件，并通过Fiddler追踪了请求。这就是我所看到的：

PUT http://hobcity.blob.core.windows.net/images2/simpletextfile.txt/?se=2014-08-11T17%3A13%3A52Z&sr=c&sp=w&sig=SlY7wURwfSjM72Hw22507OHpnaCC1Ky6POk6hhR6fbU%3D HTTP/1.1
Accept: application/json, text/plain, */*
Access-Control-Allow-Origin: *
Content-Type: text/plain, multipart/form-data; boundary=---------------------------7de26921205a0
x-ms-blob-type: BlockBlob
Referer: http://educms.azurewebsites.net/#/pages/results
Accept-Language: en-US
Origin: http://educms.azurewebsites.net
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64; Trident/7.0; rv:11.0) like Gecko
Host: hobcity.blob.core.windows.net
Content-Length: 254
DNT: 1
Connection: Keep-Alive
Pragma: no-cache

-----------------------------7de26921205a0
Content-Disposition: form-data; name="file"; filename="simpletextfile.txt"
Content-Type: text/plain

https://hobcity.blob.core.windows.net/images2/Add-Item.png
-----------------------------7de26921205a0--

我认为您遇到此问题的原因是因为您按原样上传文件（请参阅Content-Type是multipart/form-data），这样做会破坏数据。您需要做的是将文件内容读入字节数组，然后上传该字节数组。如果您搜索HTML 5 File API，您将找到如何使用JavaScript读取文件的示例。我还写了一篇关于使用JavaScript在Azure Blob存储中上传文件的博客文章，您可能会发现它很有用：http://gauravmantri.com/2013/12/01/windows-azure-storage-and-cors-lets-have-some-fun/（虽然这篇文章使用的是jQuery而不是Angular，但应该给你一些想法）。

无法在Azure Blob上看到上传的图像

1 个答案: