Question

这是按钮上的ng-click代码：

                    $scope.pickFiles = function () {
                        var picker_options = {
                            container: 'modal',
                            mimetypes: ['*'],
                            multiple: true //from attr
                        };
                        var store_options = {
                            location: 'Azure'
                        };
                        window.filepicker.pickAndStore(picker_options, store_options, function (fpfiles) {
                            $scope.$apply(function () {
                                alert(fpfiles);
                            }), function (error) {
                                console.log(JSON.stringify(error));
                            };
                        });
                    };

单击按钮后，模式会正确显示，但当我选择文件时，我会在红色背景上收到“错误上传文件....”消息。

当我点击底部的“上传”时，这是控制台上的错误：

TypeError: Unable to set property 'id' of undefined or null reference
   at Anonymous function (https://d2hbo3cbwd28c.cloudfront.net/0a45ade/v2/scripts/app.min.js:7:7517)
   at a (https://d2hbo3cbwd28c.cloudfront.net/0a45ade/v2/scripts/vendor.min.js:1:795)
   at h (https://d2hbo3cbwd28c.cloudfront.net/0a45ade/v2/scripts/app.min.js:7:7473)
   at Anonymous function (https://d2hbo3cbwd28c.cloudfront.net/0a45ade/v2/scripts/app.min.js:7:7381)
   at u (https://d2hbo3cbwd28c.cloudfront.net/0a45ade/v2/scripts/vendor.min.js:2:26212)
   at Anonymous function (https://d2hbo3cbwd28c.cloudfront.net/0a45ade/v2/scripts/vendor.min.js:2:26394)
   at p.prototype.$eval (https://d2hbo3cbwd28c.cloudfront.net/0a45ade/v2/scripts/vendor.min.js:3:1544)
   at p.prototype.$digest (https://d2hbo3cbwd28c.cloudfront.net/0a45ade/v2/scripts/vendor.min.js:3:56)
   at p.prototype.$apply (https://d2hbo3cbwd28c.cloudfront.net/0a45ade/v2/scripts/vendor.min.js:3:1820)
   at a (https://d2hbo3cbwd28c.cloudfront.net/0a45ade/v2/scripts/vendor.min.js:2:9833)

我正在尝试使用Azure Blob Storage配置它（在开发人员门户上设置了访问密钥）。它永远不会进入函数（错误）函数。

任何提示？

更新

我尝试使用小部件：

<input type="filepicker" data-fp-apikey=".............." data-fp-mimetypes="*/*" data-fp-container="modal" data-fp-store-location="azure" onchange="alert(event.fpfile.url)">

它有效，文件上传到blob存储，但只有当我将HTML直接放在页面上时它才有效。当它在AngularJS指令模板中时 - 不应用filepicker.io逻辑并显示标准输入。我想这是因为该指令后来应用于DOM而不是filepicker.io小部件逻辑。

如何在AngularJS指令模板中使用窗口小部件的任何提示？

Answer 1

我能够使小部件工作（但JavaScript API没有成功），这是Angular指令链接函数的代码片段，它将输入元素从指令模板转换为filepicker按钮：

（打字稿）

            var fPicker = (<any>window).filepicker;
            var domElement = <HTMLInputElement>element.children().get(0);
            domElement.setAttribute('data-fp-mimetype', 'image/*');
            domElement.setAttribute('data-fp-button-text', $scope.title);
            domElement.onchange = (e) => {
                alert(JSON.stringify((<any>e).fpfile));
            };
            fPicker.constructWidget(domElement);

带有Azure Blob存储的Filepicker.io - 上传错误

1 个答案: