如何使用多个 resultCallback 函数创建单个 cloudinary 实例答案

【问题标题】：How to create single cloudinary instance with multiple resultCallback functions如何使用多个 resultCallback 函数创建单个 cloudinary 实例
【发布时间】：2019-09-11 03:56:46
【问题描述】：

我正在尝试重用 Cloudinary 上传小部件的单个实例来从我的 react 应用中的多个位置上传和检索上传的媒体信息？

我可以将不同的 resultCallbacks 传递给 Cloudinary 上传小部件的同一个实例吗？

我正在构建一个反应应用程序，其中不同的文本块与不同的图像相关联。我使用 Cloudinary 上传小部件来处理上传，然后在相应的文本块旁边显示结果。

目前，我正在为每个文本块生成一个 Cloudinary 小部件的新实例，但我意识到这是资源密集型的。

为了解决这个问题，我为上传小部件创建了一个单例，我在其中传递了我想运行的回调函数（我想为每个文本块从 Cloudinary 的上传响应附加一个标识符）。

现在的问题是，一旦创建，我无法动态改变单例的回调。

有没有办法promisify 实例或将动态resultCallback 函数传递给单个实例？

const widget = {
  window: null,
  type: null,
};

/**
 * @class UploadWidget
 */
export default class UploadWidget {
  /**
   *
   * @param {object} options widget options
   * @param {string} options.type
   * @returns {undefined}
   */
  constructor({ cb, type }) {
    if (type !== widget.type) {
      widget.window = window.cloudinary.createUploadWidget(
        {
          cloudName: process.env.CLOUD_NAME,
          uploadPreset: process.env.UPLOAD_PRESET,
          styles: {
            palette: {
              window: '#FFFFFF',
              windowBorder: '#97AB35',
              tabIcon: '#4B9960',
              menuIcons: '#5A616A',
              textDark: '#000000',
              textLight: '#FFFFFF',
              link: '#FFCC53',
              action: '#4B9960',
              inactiveTabIcon: '#6D6D6C',
              error: '#F44235',
              inProgress: '#0078FF',
              complete: '#4B9960',
              sourceBg: '#FBFBFA',
            },
            fonts: {
              default: null,
              "'Fira Sans', sans-serif": {
                url: 'https://fonts.googleapis.com/css?family=Fira+Sans',
                active: true,
              },
            },
          },
        },
        cb
      );
      widget.type = type;
    }

    return widget.window;
  }
}

cb是一个函数，定义如下

function(error, result)

如果成功，error 为 null，如果失败，则为错误消息，而result 是详细说明触发事件的 JSON 对象。

【问题讨论】：

标签： javascript cloudinary

【解决方案1】：

为什么不做一个回调包装器呢？这样您就可以更改存储正确回调的变量？正如你在这里看到的，我有this.callbackHandler 作为uploadwidget 的回调和一个名为trueCallback 的变量，它存储了预期的回调函数。 this.callbackHandler 只是将它的参数传递给真正的回调，这是一个可以很容易定义的变量：

//Redefining true callback
let uploadWidget = new UploadWidget(//variables here);
uploadWidget.trueCallback = someNewCallbackHere;

/**
 * @class UploadWidget
 */
export default class UploadWidget {
  /**
   *
   * @param {object} options widget options
   * @param {string} options.type
   * @returns {undefined}
   */
  constructor({ cb, type }) {
    this.trueCallback = cb;
    if (type !== widget.type) {
      widget.window = window.cloudinary.createUploadWidget(
        {
          cloudName: process.env.CLOUD_NAME,
          uploadPreset: process.env.UPLOAD_PRESET,
          styles: {
            palette: {
              window: '#FFFFFF',
              windowBorder: '#97AB35',
              tabIcon: '#4B9960',
              menuIcons: '#5A616A',
              textDark: '#000000',
              textLight: '#FFFFFF',
              link: '#FFCC53',
              action: '#4B9960',
              inactiveTabIcon: '#6D6D6C',
              error: '#F44235',
              inProgress: '#0078FF',
              complete: '#4B9960',
              sourceBg: '#FBFBFA',
            },
            fonts: {
              default: null,
              "'Fira Sans', sans-serif": {
                url: 'https://fonts.googleapis.com/css?family=Fira+Sans',
                active: true,
              },
            },
          },
        },
        this.callbackHandler
      );
      widget.type = type;
    }

    return widget.window;
  }

  callbackHandler = (err, res) => {
    this.trueCallback(err, res);
  }
}

【讨论】：