我正在尝试将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为我所做的事情,以及如何使用它来满足我的需求。