带有 Angular 2 的文件堆栈

Question

我正在尝试添加一个选项以在我的 Angular 2 应用程序中添加图像，并希望使用 Filestack（以前称为 filepicker.io）来存储图像。 所以我在</body>上方的索引html文件中包含了这些脚本标签，正如Filestack建议的那样（并将我的API密钥放入）并在我的组件html中添加了<input>字段，它显示了添加新配方的表单：

在 index.html 中：

<script src="https://static.filestackapi.com/v3/filestack-0.5.0.js"></script>
<script>
    var url = '';
    var client = filestack.init('myApiKey');
    function showPicker() {
        client.pick({
            maxFiles: 1
        }).then(function(result) {
            url = JSON.stringify(result.filesUploaded[0].url)
        });
    }
</script>

在recipe-form.component.html中：

<input type="button" value="Upload" onclick="showPicker()" />

现在效果很好，它会上传图片，如果我添加console.log(url)，它还会显示图片的网址。但是，似乎没有办法将该变量放入我想将 url 添加到我在那里创建的对象的 RecipeFormComponent 中。我怎么能这样做？

我找到了很多关于如何将 Filestack 与 AngularJS 一起使用的资料，但没有找到如何在 Angular 2 中执行此操作...

你知道什么可以帮助我吗？

Answer 1

删除您为 index.html 显示的所有内容，除了用于加载 API 的脚本标记。

<script src="//static.filestackapi.com/v3/filestack-0.5.0.js"></script>

然后更改您的组件以合并showPicker 功能

recipe-form.component.ts

declare const filestack: {
  init(apiKey: string): {
    pick({ maxFiles }: { maxFiles: number }):
      Promise<{ filesUploaded: { url: string }[] }> 
  }
};

@Component({
  // boilerplate and ceremony
})
export class RecipeFormComponent {
  uploadedFileUrls: string[] = [];

  async showPicker() {
    const client = filestack.init('myApiKey');
    const result = await client.pick({ maxFiles: 1 });
    const url = result.filesUploaded[0].url;
    this.uploadedFileUrls.push(url);
  }
}

为了提高可维护性和可测试性，您应该将所有用于访问filestack 全局的代码移动到一个或多个专用服务中。

例如我们可以写一个类似的服务

// file-upload.service.ts
declare const filestack: {

  init(apiKey: string): {
    pick: (options: {maxFiles: number}) => Promise<{filesUploaded: {url: string}[]}>
  }
};

const client = filestack.init('myApiKey');

export default class {
  async uploadOne() {
    const result = await client.pick({ maxFiles: 1 });
    return {urls: result.filesUploaded.map(uploaded => uploaded.url)};
  }
}

我们可以通过使用包装 API 并提供对我们的应用程序重要的结果的服务从组件中使用它

import FileUploadService from 'app/services/file-upload.service';

@Component({
  // boilerplate and ceremony
})
export class RecipeFormComponent {
  constructor(readonly fileUploadService: FileUploadService) {}

  uploadedFileUrls: string[] = [];

  async showPicker() {
    const {urls: [url]} = await this.fileUploadService.uploadOne();

    this.uploadedFileUrls.push(url);
  }
}

此外，如果您使用像 SystemJS 这样的模块加载器，最好删除脚本标签本身，通过加载器映射和隐藏其全局特性。