Javascript Azure Blob映像上载405（资源不支持指定的Http谓词）

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

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);
}

$scope.reRender=函数（）{
var canvasImage=document.getElementById（“c”）；
var img=canvasImage.toDataURL（“image/png”）；
var filename='Test'；
var formdata=new formdata（）；
append（文件名，img）；
var send=函数（blob）{
var filename='Test.png'；
var formdata=new formdata（）；
append（'File1'，blob，filename）；
$.ajax({
网址：'http://myblobaccount.blob.core.windows.net/blob1',
类型：“POST”，
数据：formdata，
mimeType：“多部分/表单数据”，
processData:false，
contentType:false，
跨域：是的，
成功：功能（结果）{
log（“上传到Azure完成！”）；
},
错误：函数（错误）{
log（“出了点问题！”）；
}
})
}
var canvasImage=document.getElementById（“c”）；
如果（！canvasImage.toBlob）{
var dataURL=canvasImage.toDataURL（）；
var bytes=atob（dataURL.split（'，）[1]）
var arr=新的Uint8Array（bytes.length）；
对于（变量i=0；i

---

Azure Blob存储是否不支持POST？或者我的上传代码是否与Azure希望将图像文件发布到“blob1”中的内容不一致？

Azure blob存储不支持基于HTML表单的文件上传，AWS S3支持这一点。因此，Azure Blob存储不支持POST。我想它支持PUT，你可以试试PUT

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

---

相反，您必须将文件上载到服务器、PHP、ASP或任何东西，然后通过其SDK连接到Azure并保存它。或创建具有权限的共享签名。

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

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

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

使用类型：

“PUT”

使用

标题：[{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> 

从“@angular/core”导入{Injectable}；
从“ng2文件上载”导入{FileUploader，FileItem，Headers}；
从'@angular/Http'导入{Http}；
@可注射（）
导出类上载程序{
public uploader:FileUploader=新的FileUploader（{url:url，方法：'PUT'}）；
public hasBaseDropZoneOver:boolean=false；
公共文件：FileItem[]=this.uploader.queue；
公众反应；
构造函数（私有httpClient:Http）{}
public getUploader（）：FileUploader{
返回这个.uploader；
}
公共文件超库（e:任何）：无效{
this.hasBaseDropZoneOver=e；
}    
public uploadAll（）：void{
this.httpClient.get（getToken）
.订阅(
结果=>{
if（result.ok）{
对于（var n=1；n），我尝试了PUT，但收到错误“请求的资源上不存在“Access Control Allow Origin”标头。因此，不允许对源“”进行访问。响应的HTTP状态代码为403”。这篇Microsoft文章有一个使用JavaScript上传的部分：，但是你有关于我如何使用JavaScript获取共享访问签名的任何信息吗？因此，出于测试目的，我使用PUT将其作为公共签名，并且尽管如上所述启用了CORS，但我还是收到了CORS错误。我还尝试使用通配符作为允许的来源，但确实如此无法工作，因为Azure Storage Explorer声明“允许的来源必须是值URI”