如何在 ReactJS 中使用 cloudinary？

Posted 2023-02-22

【中文标题】如何在 ReactJS 中使用 cloudinary？

【英文标题】：How do I use cloudinary with ReactJS?

【发布时间】：2016-02-11 06:27:53

【问题描述】：

我目前正在 Flux 架构上使用 reactjs 构建应用程序。

我正在尝试使用cloudinary for node（已安装npm）来处理图像上传，但是当我尝试调用上传器函数时，我收到错误post_request.setTimeout() is not a function。

我已经被一个问题困住了一段时间，希望得到任何指点。提前致谢。

我做了什么

npm install cloudinary

import cloudinary from 'cloudinary'

cloudinary.config(params)

cloudinary.uploader.upload( image_url, callback)

从文档中，我应该可以调用 cloudinary.uploader.upload(file, callback, options) 其中 file 是文件名或图像 url

日志给出错误post_request.setTimeout() is not a function

如果有任何可以帮助上传的提示，我将不胜感激。提前致谢。

【问题讨论】：

你解决了吗？

【参考方案1】：

如果您想使用 Node.js 库执行服务器端上传，可以查看sample projects。 如果您想执行客户端上传，那么虽然 Cloudinary 目前不提供用于 React 的 SDK，但以下选项之一可能会有所帮助：

您可以查看我们的jQuery 或Angular 开源 SDK 来了解它们的实现。 您可以使用我们的Upload widget 从客户端上传图片，无需编写代码。 如果图片是从远程 URL 而不是用户的本地文件上传的，您可以使用我们的远程图片获取功能 -http://cloudinary.com/documentation/fetch_remote_images。

【讨论】：

现在有一个仅 javasciprt 的 SDK，但我找不到它的文档...如何使用它而不是使用 jQuery 捆绑我的应用程序？ （我假设你在 Cloudinary 工作是因为上面的“我们的远程图像”）

对不起，我的回复延迟，由于某种原因错过了。是的，我确实在 Cloudinary 工作:)。这是完整的纯 javascript 文档 - cloudinary.com/documentation/javascript_integration。可以通过纯 Javascript（这是一个基本示例 - codepen.io/team/Cloudinary/pen/QgpyOK）或使用上传小部件 (cloudinary.com/documentation/upload_widget) 来完成不使用 jQuery 的上传

更新：2018 年 1 月，Cloudinary 发布了 React SDK。这是文档页面：cloudinary.com/documentation/react_integration，这是 GitHub 中的存储库：github.com/cloudinary/cloudinary-react。也可以随意在那里测试示例项目。

【参考方案2】：

我认为他们此时并没有那么专注于参与 React 开发人员的上传功能。

我们在这里使用React Cloudinary Uploader 表示 Rect，这是目前最好的方法。

您可以使用完整的可视化组件，它会显示一个上传按钮、上传的图片和处理裁剪，如下所示：

<ReactCloudinaryUploader
    cloudName='appmasters-io'
    uploadPreset='willim-dev'
    onUploadSuccess=(image)=>
        console.log("image",image);
    
/>

或者，您可以静态调用 all 并根据需要实现视图，如下所示：

let options = 
    cloud_name: "demo",
    upload_preset: "a5vxnzbp",
    multiple: true,
    returnJustUrl: true
;

ReactCloudinaryUploader.open(options).then(image=>
    if (this.props.returnJustUrl)
        image = image.url;
    console.log("image",image);
).catch(err=>
    console.error(err);
);

我认为这可能比使用旧的 javascript 样式与 React 混合更好。

【讨论】：

你确定吗，github.com/cloudinary/cloudinary-react