代码之家  ›  专栏  ›  技术社区  ›  Ian Gleeson

Dropzone区块上载到Azure存储

  •  2
  • Ian Gleeson  · 技术社区  · 7 年前

    我正在尝试使用dropzone使用SAS(共享访问签名)将大型文件直接上载到Azure存储。这里的Azure侧记录了这一点: https://docs.microsoft.com/en-us/rest/api/storageservices/Put-Block

    Dropzone现在支持分块,所以我决定使用它。不幸的是,很难找到它的实现。

    我可以使用params在表单数据中发送blockId,但似乎无法从中更改url。

    $("#videoSection").dropzone({
                params: function (files, xhr, chunk) {
                    console.log(chunk);
    
                    xhr.setRequestHeader('x-ms-blob-type', 'BlockBlob');
    
                    //I can get the blockId from the chunk here
    
                    //this.options.url.replace("test") //doesn't work
                    //xhr.open(this.options.method, this.options.url.replace("test"), true); //doesn't work
    
                    return {"url": "test"}; //this returns form-data
                },
                url: "Create",
                method: "PUT",
                //headers: { "x-ms-blob-type": "BlockBlob" },
                chunking: true,
                chunkSize: 4000000,
                forceChunking: true,
                retryChunks: true,
                retryChunksLimit: 3,
                autoProcessQueue: false,
                acceptedFiles: "video/*",
                maxFiles: 1,
                maxFilesize: 3000,
                previewTemplate: $("#videoTemplate").html(),
                dictDefaultMessage: "Drop Video Here",
                init: function () {
                    this.on("processing", function (file) {
                        var blockId = 1;
    
                        @*this.options.url = "@(Config.Value.StoragePrefix)/@(user.Company.StorageName)/inspections/@Model.InspectionData.Inspection.Id/videos/"
                            + file.name + "@Html.Raw(Model.SharedAccessSignature + "&comp=block&blockid=")" + blockId;*@
    
    
                        var progressBar = $(file.previewElement).find(".dropzoneProgressBar");
                        progressBar.show();
                    });
                    this.on("chunksUploaded", function (file, done) {
                        $.ajax({
                            type: "PUT",
                            url: "@(Config.Value.StoragePrefix)/@(user.Company.StorageName)/inspections/@Model.InspectionData.Inspection.Id/videos/"
                                + file.name + "@Html.Raw(Model.SharedAccessSignature + "&comp=blocklist")",
                            success: function (data) {
                                done();
                            },
                            error: function (e) {
                                toastr.error(e);
                                console.log(e);
                            }
                        });
                    });
                    this.on("uploadprogress", function (file, progress, bytesSent) {
                        var progressBar = $(file.previewElement).find(".dropzoneProgressBar");
                        progress = bytesSent / file.size * 100;
                        progressBar.width(progress + "%");
                    });
                    this.on("success", function (file, response) {
                        var successCheckmark = $(file.previewElement).find(".dropSuccess");
                        successCheckmark.toggle();
                        var progressBar = $(file.previewElement).find(".dropzoneProgressBar");
                        progressBar.css("background-color", "green");
                    });
                }
            });
    
    1 回复  |  直到 7 年前
        1
  •  2
  •   stambikk    7 年前

    这条线有问题 this.options.url.replace("test") //doesn't work this.options.url = this.options.url.replace("test", "newValue") //this should work . 我正在使用类似的方法。问题是 params 回调调用一次 XmlHttpRequest 您需要为要发送的下一个块设置url(使用 chunk.index + 1 用于基于零的索引)。我不确定如果你有一个 parallelChunkUploads 启用-我还没有测试要处理的第一个块是否是第一个。如果你需要更多的信息,请告诉我。