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

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

据我所知，工作流程是：

用户选择一个文件

dropzone

处理

事件触发。在事件处理程序中，我在我的站点的API上调用一个方法，该方法创建一个Azure Blob URI以上载到，包括SAS查询字符串

dropzone上载URL设置为“安全”blob URL

上传开始了

我发现下面的wiki文章展示了如何动态设置dropzone URL（）

问题是上面的例子是同步的。如何延迟上传，直到从我的web api异步请求URL为止

---

谢谢

您可以尝试使用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();
    });
  }
};

---

也许我的回答有点晚了

使用预定义的SAS 在呈现页面时，只需使用

datasas

属性将其保存在

form

元素中。我看到的唯一缺点是，如果页面有一段时间没有刷新，您的SAS可能会过期。这是我工作代码中的一部分（其他变体来自我的头部）

在Dropzone的

init中使用异步调用
异步运行SAS后运行Dropzone
请参见
好问题！我们也需要这样做。在我深入研究这个库之前，你介意让我知道你是否成功使用Dropzone处理Azure上传吗？在这一过程中有什么挑战吗？使用URL，我假设您可以将上载文件名设置为原始文件名以外的内容，对吗？
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();
    });
  }
};

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.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}`;
    })
  },
}