使用Dropzone.js的双(?)HTTP PUT请求?

时间:2019-04-05 15:40:04

标签: http azure-storage dropzone.js

我正在尝试将Dropzone.js与Azure存储和ASP.NET结合使用,以使用SAS将文件上传到Azure存储。

我可以创建SAS URL并将其传递给使用Dropzone.js上传文件的视图。我什至可以成功地发出HTTP PUT请求并上传文件,但是,我认为代码有问题,尽管事实确实如此。

<form class="dropzone" id="file-upload" action="@Model.ContainerURI"></form>


@section Scripts {
    <script type="text/javascript">

        Dropzone.options.fileUpload = {
           //autoProcessQueue: false,
            paramName: "file",
            method: 'put',
            headers: {
                "x-ms-blob-type": "BlockBlob"
            },
            clickable: true,
            uploadMultiple: true,
            maxFiles: 5,
            init: function () {
                this.on("addedfile", function (file) {
                    console.log('File Added!');
                    console.log(file);
                });

                this.on("processing", function (file) {
                    var cloudURL = this.options.url;
                    var fileName = file.name;
                    var hostURL = cloudURL.split("?")[0];
                    var sas = cloudURL.split("?")[1];
                    var fullURL = hostURL.concat("/", fileName, "?", sas);
                    console.log("full URL is: ", fullURL);
                    this.options.url = fullURL;
                });

                this.on("sending", function (file) {
                    console.log("In sending function");
                    xhr = new XMLHttpRequest(); 
                    xhr.open("PUT", this.options.url);
                    xhr.setRequestHeader("x-ms-blob-type", "BlockBlob");
                    xhr.send(file.data);
                });
            }
        };

    </script>
}

@Model.ContainerURI是从Azure存储生成的SAS令牌。目前,Azure存储CORS的配置是*的{​​{1}},这是我所需要的。上面的代码有效(减去了如果是文本文件则不发送文件数据的事实),但似乎我在两次发出PUT请求,这似乎非常不必要。我注意到,如果我在PUT中未包含方法PUT,则会收到Dropzone.options.fileUPload错误。而且,如果我在发送函数中忽略了CORS,它会返回一个xhr.setRequestHeader("x-ms-blob-type", "BlockBlob");,表示缺少所需的标头之一。但是,当我完全按照上述方式使用代码时,所有内容都可以正常上传,没有任何错误。

我确定我不是100%肯定Dropzone.js在幕后为我做的事情,并且会解释混乱的HTTP请求。谁能澄清何时使用400的{​​{1}}与processing任务,以及何时最好同时使用两者?通常,我只是认为我需要更好地了解Dropzone为我所做的事情,以及如何使用它来满足我的需求。

0 个答案:

没有答案