当我使用XMLHttpRequest和SAS将图像放入Azure Blob存储时格式错误

Question

我已经在SPA应用程序中设置了将文件发送到Azure Blob存储的功能。

为此，我使用了XMLHttpRequest和FormData（我的用户在我公司管理的计算机上，并且所有人都可以访问HTML5）。 为了管理安全性，在发送每个文件之前，先调用Web Api的方法以获得共享访问签名。

我将文件的Content-Type以及其他信息转发到标头。

一切都变好了，文件已正确发送并保存在Azure Blob存储中，但是在传输过程中，映像文件似乎已“更改”。

它们很好用，我可以下载它们并在下载后阅读它们，但是我无法直接从img标签打开它们。

另一方面，如果我通过Microsoft Azure存储资源管理器发送相同的图像文件，则没有问题，该图像在img标记中得到了很好的识别。 但是，在一种情况下，内容类型被标记为“ image / jpeg”。 唯一值得注意的区别是，这两个邮件之间的MD5是不同的，而它是相同的原始文件。

根据我的发现，似乎在通过XMLHttpRequest发送时在文件的开头和结尾添加了文本。

我解释了我的代码，以便您可以指导我：注1：我使用打字稿（但是javascript解决方案适合我）和Promise。 注意2：我已解决所有CORS问题。 注意3：我使用的是Azure存储仿真器，但是我尝试使用普通的Azure服务，问题是相同的。

这是在Chrome中的图像中添加的文本：

------WebKitFormBoundaryKj5cK88faAwJd4av
Content-Disposition: form-data; name="file1"; filename="test.jpg"
Content-Type: image/jpeg

[image content]

------WebKitFormBoundaryKj5cK88faAwJd4av--

我的Web Api：

[Route(@"api/Storage/FileSas/Customers/{id:int}")]
public async Task<IHttpActionResult> GetFileSas(int id, string fileName, long? fileSize = 0, string contentType = null)
{
    if (string.IsNullOrWhiteSpace(fileName))
        this.ModelState.AddModelError("fileName", "File name i");

    if (!fileSize.HasValue || fileSize.Value > maxFileSize)
        this.ModelState.AddModelError("fileSize", "File size exceeded");

    if (!this.ModelState.IsValid)
        return BadRequest(this.ModelState);

    var serverUrl = ConfigurationManager.AppSettings[SERVER_URL];
    var container = ConfigurationManager.AppSettings[CONTAINER_NAME];

    SharedAccessBlobPolicy policy = new SharedAccessBlobPolicy()
    {
        Permissions = SharedAccessBlobPermissions.Write,
        SharedAccessStartTime = DateTime.UtcNow.AddMinutes(-60),
        SharedAccessExpiryTime = DateTime.UtcNow.AddMinutes(60),
    };

    CloudBlockBlob blobFile = blobContainer.GetBlockBlobReference(Path.Combine("customers", id.ToString(), fileName));



    var exists = await blobFile.ExistsAsync();
    if (exists)
    {
        await blobFile.SnapshotAsync();
    }

    var signature = blobFile.GetSharedAccessSignature(policy);

    return Content<string>(HttpStatusCode.Created, Path.Combine(serverUrl, container, blobFile.Name + signature));
}

我的TypeScript文件：

            context.Storage.getFileSas(customerId, file)
                .then((response: Interfaces.Result<string>) => {

                    let sasUrl = response.Data;

                    let formData = new FormData();

                    formData.append("file1", file, file.name);

                    var xhr = new XMLHttpRequest();

                    xhr.upload.onprogress = (event) => {
                        if (event.total > 0)
                            this.Progress(event.loaded * 100 / event.total);
                    };

                    xhr.onloadstart = function (e) {
                    }

                    xhr.onloadend = (e) => {
                        this.Progress(0);
                    }


                    xhr.open("PUT", sasUrl, true);
                    xhr.setRequestHeader('x-ms-blob-type', 'BlockBlob');
                    xhr.setRequestHeader('Content-Type', file.type);
                    xhr.setRequestHeader('x-ms-blob-content-type', file.type);                
                    xhr.setRequestHeader('x-ms-version', "2016-05-31");


                    xhr.setRequestHeader('x-ms-meta-CustomerId', customerId);
                    xhr.setRequestHeader('x-ms-meta-UserId', context.User.User.Id.toString());
                    xhr.setRequestHeader('x-ms-meta-UserName', context.User.User.Name);


                    xhr.send(formData);
                })
        })).catch((error) => {
            console.log(error);
        });

文件来自这里：

 let fileInputElement1: HTMLInputElement = <HTMLInputElement>document.getElementById("file1");

 let file = fileInputElement1.files[0];

我的HTML部分：（我使用淘汰赛）

<form method="put" target="_blank" enctype="multipart/form-data">
                <input type="file" name="name" value="" id="file1" />
                <button data-bind="click:send"> Send</button>
</form>

如果有人有想法？ ...

提前致谢。

PS：sasUrl像这样： http : //127.0.0.1 :10000/devstoreaccount1/customers/65143/test.jpg?sv=2016-05-31&sr=b&sig=s0671%2BLvCZTqyNfhlCthZW8KftjKyIMAlOT1nbsnlng%3D&st=2017-03-05T11% ％3A22Z＆SE = 2017-03-06T12％3A38％3A22Z＆amp; SP = R＆RSCT =图像％2Fjpeg

Answer 1

感谢Gaurav Mantri，他指出了我的右边，这里是我的修改（仅因为我使用打字稿）：

  context.Storage.getFileSas(customerId, file)
            .then((response: Interfaces.Result<string>) => {

                let sasUrl = response.Data;

                var xhr = new XMLHttpRequest();

                xhr.upload.onprogress = (event) => {
                    if (event.total > 0)
                        this.Progress(event.loaded * 100 / event.total);
                };

                xhr.onloadstart = function (e) {
                }

                xhr.onloadend = (e) => {
                    this.Progress(0);
                }


                let reader = new FileReader();

                reader.readAsArrayBuffer(file);

                reader.onloadend = (event) => {
                        let target = <FileReader>event.target;

                        if (target.readyState == reader.DONE) {

                            var requestData = new Uint8Array(target.result);

                            xhr.open("PUT", sasUrl, true);
                            xhr.responseType = "blob";
                            xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
                            xhr.setRequestHeader('X-File-Name', file.name);
                            xhr.setRequestHeader('x-ms-blob-type', 'BlockBlob');
                            xhr.setRequestHeader('Content-Type', file.type || 'application/octet-stream');
                            xhr.setRequestHeader('x-ms-blob-content-type', file.type || 'application/octet-stream');
                            xhr.setRequestHeader('x-ms-version', "2016-05-31");


                            xhr.setRequestHeader('x-ms-meta-CustomerId', customerId);
                            xhr.setRequestHeader('x-ms-meta-UserId', context.User.Id.toString());
                            xhr.setRequestHeader('x-ms-meta-UserName', context.User.Name);


                            xhr.send(requestData);
                        }
                    }
            })
    })).catch((error) => {
        console.log(error);
    });

现在，我将开始写一个Promise来嵌入这种功能。

PS：我没有找到标记Gaurav Mantri作为答案的方法，所以我创建了我的。 PS 2：我想给Gaurav Mantri +1一些帮助...但是我不能：/