Cloudinary 上传图像小部件无法按预期工作

Posted 2023-03-25

【中文标题】Cloudinary 上传图像小部件无法按预期工作

【英文标题】：Cloudinary upload image widget does not work as expected

【发布时间】：2020-08-04 19:18:21

【问题描述】：

我正在使用上传图片小部件，但没有成功。

1) result.info.path 返回无效的 url。 2) 由于no.1，上传的图片没有预览 3) 没有图像上传到我在 Cloudinary 的媒体文件夹。

小提琴： https://jsfiddle.net/7uqb83t1/

这些是我的预设设置：

有人可以分享这个小部件+预设设置的工作版本吗？

【参考方案1】：

成功上传后，您需要检查result.info.secure_url 以获取指向资产的链接。目前，在您的预设中，您使用的是 Async，这意味着传入的转换是在后台（异步）执行的，因此，您将获得 pending 结果。 Async 假设您使用通知 URL 作为 webhook，处理完成后您将在其中收到上传 API 响应。在你的情况下，我建议关闭异步。

此外，您在预设中配置的传入转换无效，因此，您将在上传时收到error。请 console.log 在你的 JSFiddle 中查看它。从本质上讲，它将是-

自动重力只能与crop、fill、lfill、fill_pad或 大拇指

“自动”重力 (g_auto) 意味着裁剪（自动选择图像中最有趣的部分进行对焦），因此您需要使用适当的裁剪模式。 'scale' 保留所有图像数据并且不进行裁剪，这就是g_auto 无法使用它的原因。有关不同裁剪模式的详细信息，请参阅文档的以下部分 - https://cloudinary.com/documentation/image_transformation_reference#crop_parameter - 这将帮助您决定要使用哪一个。

最后，您还应该考虑更新传入的转换，以便它只调整一次大小，因为目前，使用相同的裁剪模式调整它的大小 3 次是多余的。例如，你可以只使用c_scale,q_auto,w_687，或者如果你想使用“自动”重力，你可以试试c_fill,g_auto,q_auto,w_687。

【讨论】：

感谢您的回答，我按照您的建议修改了预设，除了一个小问题外，它可以正常工作。上传后Done按钮被禁用，您可以在小提琴中看到它，可以看到为什么吗？另外，我没有看到用户删除/更新上传的图片的选项，是不是有什么开箱即用的东西还是我应该自己做？

@OffirPe'er - 除了正在进行时，Done 按钮在打开小部件时被禁用inline。您可以在成功上传myWidget.close();后自动关闭Widget，也可以将其显示为模态，用户可以点击Done或X关闭。

谢谢，有没有删除上传图片的选项？也许在缩略图上使用X 按钮？万一用户上传了图片，后来后悔了。

是的，可以单独从客户端删除图像。但是，这仅在图像上传后 10 分钟内可用。要使用它，您需要从上传预设配置中启用“返回删除令牌”。然后，由于您在上传时使用“缩略图”，您将在缩略图旁边看到一个X 按钮，单击它会触发删除。您还可以从result.info.delete_token 中提取令牌并向 Cloudinary 发送请求以将其删除。 cloudinary.com/documentation/…

我通过在上传控制下的预设中设置它得到了返回删除令牌，现在我有了我的删除令牌如何使用上传小部件使用它，我找不到关于它的消息..