使用dropzone.js将文件直接上载到Azure Blob存储（使用SAS）

Question

我想使用dropzone.js将文件直接上传到Azure Blob存储，使用SAS（example here）将文件保密。

据我了解，工作流程为：

1. 用户选择文件
2. dropzone processing事件触发。在事件处理程序中，我在我的网站API上调用一个方法，该方法创建要上传的Azure Blob URI，包括SAS查询字符串
3. dropzone上传网址设置为＆＃34; secure＆＃34; blob URL
4. 上传开始

我发现以下维基文章展示了如何动态设置dropzone网址（https://github.com/enyo/dropzone/wiki/Set-URL-dynamically）

Dropzone.options.myDropzone = {
  init: function() {
    this.on("processing", function(file) {
      // I need to do an async call here, to get the URL...
      this.options.url = "/some-other-url";
    });
  }
};

问题是上面的例子是同步的。如何在我的网络API 异步请求网址之前延迟上传？

由于

Answer 1

你可以尝试使用jQuery进行同步ajax调用。

function GetUrl() {
    var url = "";
    $.ajax({
        async: false,
        success: function(data) {
            url = data;
        }
        // Other opts   
    });
    return url;
}

Dropzone.options.myDropzone = {
  init: function() {
    this.on("processing", function(file) {
      this.options.url = GetUrl();
    });
  }
};

Answer 2

我可能有点迟到了回答

使用预定义的SAS

在渲染页面时，只需将其保存在form元素中，并使用data-sas属性。我看到的唯一缺点 - 如果页面暂时没有刷新，您的SAS可能会过期。这是我工作代码的一部分（其他变体来自我的头脑）

Dropzone.options.myDropzone = {
  method: "PUT",
  headers: {"x-ms-blob-type": "BlockBlob"},
  sending: (file, xhr) => {
    // To send file without wrappintng it to multipart/form-data,
    // Azure won’t unwrap it
    const _send = xhr.send;
    xhr.send = () => { _send.call(xhr, file) };
  },
  init: function() {
    const dz = this,
          action = dz.element.action,
          sas = dz.element.dataset.sas;

    dz.on("processing", (file) => {
      dz.options.headers["Content-Type"] = file.type;
      dz.options.url = `${action}/${file.name}?${sas}`;
    })
  },
}

在Dropzone的init

中使用异步调用

Dropzone.options.myDropzone = {
  autoProcessQueue: false, // To prevent automatic auploading before getting SAS
  acceptedFiles: ".xls,.xlsx",
  method: "PUT",
  headers: {"x-ms-blob-type": "BlockBlob"},
  sending: (file, xhr) => {
    // To send file without wrappintng it to multipart/form-data,
    // Azure won’t unwrap it
    const _send = xhr.send;
    xhr.send = () => { _send.call(xhr, file) };
  },
  init: function() {
    let sas = null;
    const dz = this,
          xhr = new XMLHttpRequest();

    xhr.addEventListener("load",
        (event) => {
          sas = getSasFromEvent(event);
          dz.options.autoProcessQueue = true;
          dz.processQueue();
        }, true);
    xhr.open("GET", "/get-sas");
    xhr.send();

    dz.on("processing", (file) => {
      dz.options.headers["Content-Type"] = file.type;
      dz.options.url = `${action}/${file.name}?${sas}`;
    })
  },
}

在您获得SAS asynchrouniosly

之后运行Dropzone

请参阅Create dropzones programmatically