如何在 Angular 中实现 Cloudinary 上传小部件

Question

我正在尝试在 Angular 中使用 Cloudinary 上传小部件。我遵循了 cloudinary 提供的示例代码，但它似乎不起作用。看起来我缺少导入或包来访问该功能cloudinary.createUploadWidget 我已经安装并导入了：

import { CloudinaryModule } from '@cloudinary/ng';

在 app.module.ts 中。我已经添加了

<script
  src="https://upload-widget.cloudinary.com/global/all.js"
  type="text/javascript"
></script>

在 index.html 文件中。

但我的组件中仍然出现无法找到名称“cloudinary”的错误。 我缺少什么导入来访问我的角度组件中的“cloudinary”。 cloudinary 文档没有阐明它，在他们的 Sandbox Example 中他们有同样的错误。

ngOnInit() {
    this.myWidget = cloudinary.createUploadWidget( /// this is where the error occurs
      {
        cloudName: this.cloudName,
        uploadPreset: this.uploadPreset
     
      },
      (error, result) => {
        if (!error && result && result.event === "success") {
          console.log("Done! Here is the image info: ", result.info);
          document
            .getElementById("uploadedimage")
            .setAttribute("src", result.info.secure_url);
        }
      }
    );

是否有人有幸使 cloudinary 上传小部件以 angular 方式工作？ 非常欢迎任何关于我所缺少的东西的见解。

Answer 1

您可以尝试按照以下步骤操作： https://cloudinary.com/documentation/angular_quick_start