Rails Cloudinary Widget 实现问题答案

【问题标题】：Rails Cloudinary Widget implementation troubleRails Cloudinary Widget 实现问题
【发布时间】：2022-01-14 12:48:06
【问题描述】：

我正在从 Dropzone 的小部件转移到 Cloudinary 的小部件并遇到很多麻烦。

首先，Dropzone 目前在上传到 cloudinary 方面表现出色。我正在转向他们的专有小部件，原因有很多，这只会分散这篇文章的注意力。

乍一看，我遇到的问题很“简单”。图像正在正确上传到 Cloudinary。我在后续的表单帖子中遇到了问题。

Dropzone 自动创建必要的隐藏输入和值...Cloudinary 你必须自己滚动。所以我已经这样做了，不仅它不起作用，输入值与 dropzone 为同一图像生成的值非常不同。我在 dropzone.js 中找不到可以解释如何创建输入的逻辑。

例如，下面是 dropzone 为一张图像呈现的内容：

<input type="hidden" name="entity[job_entries_attributes][0][images][]" value="eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBNkpLQWc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--7d13c16894d2a146f1ac85e12ddea03d9c14c26e">

当我手动滚动时，我可以访问从直接上传到 Cloudinary 返回的对象 - public_id、asset_id 等。但它们都不像上面的值。我假设帖子和随后的图像渲染因此失败。

谁有这方面的经验？？？快把我逼疯了……

【问题讨论】：

标签： ruby-on-rails ruby-on-rails-5 cloudinary

【解决方案1】：

Upload Widget 是一个交互式 UI，用于将图像上传到您的 Cloudinary 媒体库帐户，并且可以根据用例要求扩展其使用范围。虽然，该小部件没有 Dropzone 具有的许多功能，但您可以使用不同的 events 来包含使用 javascript 或 HTML 的其他自定义进程（参见示例演示 here 和 here）。

<div id="widgetdiv"></div>

<script type="text/javascript">
        cloudinary.openUploadWidget({
                    cloudName: 'cloudname',
                    inlineContainer: '#widgetdiv',
                    uploadPreset: 'uploadPreset',
                    showPoweredBy: false,
                    sources: ['local','instagram']},
        (error, result) => {
                    if (!error && result && result.event === "success") {
                        console.log('Done! Here is the image info: ', result.info);

                        console.log('Custom implementations here...');
                        
                        var filename = result.info.secure_url.split('/').pop().split('#')[0].split('?')[0];
                        var filesize = result.info.bytes;

                        // Populate form, card container, post to another endpoint, etc 
                }
            }
        );
</script>

【讨论】：