Question

我正在尝试使用JavaScript将图像（转换为按预期工作的图像转换为HTML5画布）上传到Azure Blob存储。在这个阶段，我不太关心文件大小，而且最关心的是能够将文件发布到Azure Blob存储。我已经阅读了很多关于SAS的不同文章，对于测试的意图，我有一个公共容器，但需要学习如何生成SAS。此时，我只需要能够发布。我已经使用CORS配置了我的blob帐户，如下所示：

Allowed Origins: http://localhost:50045
Allowed Methods: DELETE,GET,NONE,POST,PUT
Allowed Headers: content-length,accept,x-ms-*
Exposed Headers: x-ms-*
Max Age (seconds): 10000

当我使用以下上传代码（正在上传到单独的供应商Web服务）时，我收到以下错误：

405 (The resource doesn't support specified Http Verb.)

这是我的代码：

$scope.reRender = function () {
    var canvasImage = document.getElementById("c");
    var img = canvasImage.toDataURL("image/png");
    var filename = 'Test';

    var formdata = new FormData();
    formdata.append(filename, img);

    var send = function (blob) {
        var filename = 'Test.png';
        var formdata = new FormData();
        formdata.append('File1', blob, filename);

        $.ajax({
            url: 'http://myblobaccount.blob.core.windows.net/blob1',
            type: "POST",
            data: formdata,
            mimeType: "multipart/form-data",
            processData: false,
            contentType: false,
            crossDomain: true,
            success: function (result) {
                console.log("Upload to Azure complete!");
            },
            error: function (error) {
                console.log("Something went wrong!");
            }
        })
    }

    var canvasImage = document.getElementById("c");
    if (!canvasImage.toBlob) {
        var dataURL = canvasImage.toDataURL();
        var bytes = atob(dataURL.split(',')[1])
        var arr = new Uint8Array(bytes.length);
        for (var i = 0; i < bytes.length; i++) {
            arr[i] = bytes.charCodeAt(i);
        }
        send(new Blob([arr], { type: 'image/png' }));
    }
    else
        canvasImage.toBlob(send);
}

Azure Blob存储不支持POST吗？或者我的上传代码与Azure正在寻找将图像文件发布到＆＃34; blob1＆＃34;？

的内容不一致

Answer 1

Azure blob存储不支持基于HTML表单的文件上载，AWS S3支持此功能。因此Azure Blob存储不支持POST。我认为它支持PUT，你可以尝试PUT。

但是在JavaScript中完成所有这些操作是危险的，任何人都可以在获得必要的共享签名后放置项目。如果您不提供共享访问签名，则blob存储将不允许任何操作。

相反，您必须将文件上传到您的服务器，PHP，ASP或任何内容，然后通过其SDK连接到Azure并保存。或者创建一个拥有权限的共享签名。

Answer 2

您必须获取 SASToken 并将其添加到您的路径

使用类型："PUT"，

使用headers: [{ name: 'x-ms-blob-type', value: 'BlockBlob' }]

这样的事情：

<code> 
import { Injectable } from '@angular/core';
import { FileUploader, FileItem, Headers } from 'ng2-file-upload';
import { Http } from '@angular/http';


@Injectable()
export class Uploader {
    public uploader: FileUploader = new FileUploader({ url: URL, method: 'PUT' });
    public hasBaseDropZoneOver: boolean = false;
    public files: FileItem[] = this.uploader.queue;

    public r: Response;

    constructor(private httpClient: Http){}

    public getUploader(): FileUploader {
        return this.uploader;
    }

    public fileOverBase(e: any): void {
        this.hasBaseDropZoneOver = e;
    }    

    public uploadAll(): void {

        this.httpClient.get(getToken)
            .subscribe(
            result => {
                if (result.ok) {

                    for (var n = 1; n <= this.files.length; n++) {                        

                        let fullUrl = URL + this.files[n].file.name + result.json();
                        console.log('--> send url ' + fullUrl);

                        this.uploader.setOptions({
                            url: fullUrl, method: 'PUT',
                            headers: [{ name: 'x-ms-blob-type', value: 'BlockBlob' }]
                        });

                        this.uploader.uploadItem(this.files[n]);
                    }
                }
                else {
                    console.log('--> get token error ' + result.statusText);
                }                
            });                
    }

    public cancelAll(): void {
        this.uploader.cancelAll();
    }

    public clearQueue(): void {
        this.uploader.clearQueue();
    }    
}
</code>

Answer 3

以下是我的CORS属性设置，对我有用，希望这会有所帮助。

Allowed Origins: *
Allowed Methods: GET,PUT
Allowed Headers: *
Exposed Headers: *
Max Age (seconds): 200

Azure Blob图像上传405（资源不支持指定的Http动词）

3 个答案: