angularjs - 从 Angular 服务获取上传 URL

Question

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

Dropzone.js 有一个名为“url”的配置选项，它可以是字符串或函数。我需要从此函数调用我的 angular.service 来生成文件将发送到的 Azure 签名 URL。在我的 Controller 中，我生成 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 不支持 Promise。假设我们不重写 Dropzone 来支持 Promise，应该如何处理这个问题？我已经找到了一种方法来让一切停止，直到 promise 得到解决。

Answer 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();
                    });
                }
            };