从 Angular 服务获取上传 URL

Question

我有一个 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，应该如何处理？在承诺得到解决之前，我已经找到了让一切停止的方法。

Answer 1

Dropzone 有一个名为 "accept" 的回调。其中一个参数是一个函数，如果一切成功，该函数就会被调用。因此，我们可以在承诺 returns 时调用此完成函数。这种方法的一个缺点是 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();
                    });
                }
            };

从 Angular 服务获取上传 URL

Get Upload URL from Angular Service

angularjs

dropzone.js