如何在 ReactJS 中使用 cloudinary？

Question

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

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

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

我做了什么

1. npm install cloudinary

2. import cloudinary from 'cloudinary'

3. cloudinary.config(params)

4. cloudinary.uploader.upload( image_url, callback)

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

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

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

Answer 1

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

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

Answer 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 混合更好。