从 Angular 服务获取上传 URL答案

【问题标题】：Get Upload URL from Angular Service从 Angular 服务获取上传 URL
【发布时间】：2015-07-08 02:45:49
【问题描述】：

我有一个 Angular 应用程序，我在其中使用拖放文件上传组件 Dropzone.js。上传的文件将直接发布到 Azure blob。 Azure 要求我为每个文件上传生成一个唯一的 URL。

Dropzone.js 有一个名为“url”的配置选项，它可以是字符串或函数。我需要从此函数调用我的 Angular 服务来生成将发送文件的 Azure 签名 URL。在我的控制器中，我将 Dropzone 的配置生成为：

var options = {
                url: function (files) {
                    var f = files[0];
                    return _fileHandlingService.getUploadUrl(f.name);
                },
                maxFiles: 10,
                maxFilesize: 20,
                acceptedFiles: "image/*",
                method: "PUT"
            };

我的文件处理服务如下：

getUploadUrl = function (filename) {
            this.$http.get("/api/getUploadUrl", { params: { filename: filename } }).then(function (resp) {
                return resp.data;
            });
        };

问题在于，promise 没有及时解决以将其提供给 Dropzone 并且 Dropzone 不支持 promises。假设我们不重写 Dropzone 来支持 Promise，应该如何处理？我已经能够找到一种方法让一切都停止，直到承诺得到解决。

【问题讨论】：

不，问题是您正在为 url 属性分配一个承诺，我猜 DropZone 不会等待。您应该将整个选项创建以及您需要在承诺解决回调中进行的任何其他调用，即_fileHandlingService.getUploadUrl(f.name).then(function(url) { var options = ...
由于 Dropzone 的工作原理，我无法真正做到这一点。在插件的初始配置期间传递选项对象。在文件被拖入要上传的插件之前，不会调用 url 函数。使用我设置的参数，每个上传的文件都会调用一次 url 函数，我需要使用这个文件名来获取 Azure blob URL。
我没有试过这个，所以我没有所有的细节，但是......你可以先禁用自动处理，然后使用 dropzone 的.getAcceptedFiles() 来获取所有文件。接下来运行您的服务以获取 url 并将它们存储在一个数组中。最后，拨打.processQueue()。选项url 函数处理你的文件数组——在你真正开始处理队列之前，它不会被调用（我认为）。不幸的是，使用这种方法，您必须按一个按钮才能开始实际上传。
再想一想，你可以等待服务承诺触发.processQueue()，这样它对用户来说是“自动的”。
Jasen，你让我走上了正确的道路。我已经能够使用接受回调。我会发布一个完整的答案。

标签： angularjs dropzone.js

【解决方案1】：

Dropzone 有一个名为“accept”的回调。其中一个参数是一个函数，如果一切成功，就会调用该函数。因此，当我们的 Promise 返回时，我们可以调用这个 done 函数。这种方法的一个缺点是，在文件排队和上传时会生成 URL。就我而言，URL 过期的可能性很小，具体取决于我的过期日期和用户上传所需的时间。我的配置选项现在看起来像：

var options = {
                url: function (files) {
                    var f = files[0];
                    return f.uploadUrl;
                },
                maxFiles: 10,
                maxFilesize: 20,
                acceptedFiles: "image/*",
                method: "PUT",
                accept: function (file, done) {
                    _fileHandlingService.getUploadUrl(file.name).then(function (data) {
                        file.uploadUrl = data;
                        done();
                    });
                }
            };

【讨论】：