从Angular Service获取上传URL

时间:2015-04-29 02:13:31

标签: angularjs dropzone.js

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

Dropzone.js有一个名为“url”的配置选项,可以是字符串或函数。我需要从此函数调用我的角度服务来生成将在其中发送文件的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;
            });
        };

问题是承诺无法及时解决,因为它被提供给Dropzone并且Dropzone不支持promises。假设我们不重写Dropzone以支持承诺,应如何处理?我已经找到了一种方法,在承诺得到解决之前一直停下来。

1 个答案:

答案 0 :(得分:2)

Dropzone有一个名为“accept”的回调。其中一个参数是一个函数,如果一切都成功就会被调用。因此,当我们的承诺返回时,我们可以调用此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();
                    });
                }
            };