Rails Cloudinary 提交后直接上传图片

Posted 2023-03-25

【中文标题】Rails Cloudinary 提交后直接上传图片

【英文标题】：Rails Cloudinary Direct Image Upload After Commit

【发布时间】：2014-08-02 06:53:36

【问题描述】：

我有一个关于从 Cloudinary 直接上传图片的问题。我可以使用 simple-form 和 在 Rails 应用程序中进行设置，但是在我选择文件后，它开始上传。我不喜欢这种方法，我希望在提交表单后立即开始上传。可能吗？我担心 Cloudinary 服务器中的文件在我的数据库中没有相应的 id。

【参考方案1】：

默认实现确实会在选择后自动上传文件。大多数用户不会担心删除意外上传的图像，因为它们不会占用大量额外的存储空间。但是，如果您不想在选择时自动上传图像，您可以在fileupload 调用中将autoUpload 设置为false。例如：

$(document).ready(function() 
  $('.cloudinary-fileupload').fileupload(
    autoUpload: false
  );
);

【参考方案2】：

我想你可以帮帮我，其实我有这个脚本...

<script>
  $(document).ready(function() 
    // Cloudinary jQuery integration library uses jQuery File Upload widget
    // (see http://blueimp.github.io/jQuery-File-Upload/).
    // Any file input field with cloudinary-fileupload class is automatically
    // wrapped using the File Upload widget and configured for Cloudinary uploads.
    // You can further customize the configuration using .fileupload method
    // as we do below.
    $(".cloudinary-fileupload")
      .fileupload( 
        // Uncomment the following lines to enable client side image resizing and valiation.
        // Make sure cloudinary/processing is included the js file       
        disableImageMetaDataLoad: true,        
        disableImageResize: false,
        imageMaxWidth: 800,
        imageMaxHeight: 800,
        acceptFileTypes: /(\.|\/)(gif|jpe?g|png|bmp|ico)$/i,
        maxFileSize: 20000000, // 20MB
        dropZone: "#direct_upload",
        start: function (e) 
          $(".status").text("Starting upload...");
        ,
        progress: function (e, data) 
          $(".status").text("Uploading... " + Math.round((data.loaded * 100.0) / data.total) + "%");
        ,
        fail: function (e, data) 
          $(".status").text("Upload failed");
        
      )
      .off("cloudinarydone").on("cloudinarydone", function (e, data) 
        $(".status").text("");
        $(".preview").html(
          $.cloudinary.image(data.result.public_id, 
            format: data.result.format, width: 150, height: 100, crop: "limit"
          )
        );
      );
    );  
</script>

我从 javascript 开始。上面的这个脚本工作正常，但它只是在上传后显示预览。我不喜欢这种方法，因为如果用户更改预览图像，我将在我的数据库中没有相关注册的情况下将一个文件上传到 Cloudinary。如果可以显示预览并在用户按表单中的提交后上传，那就太好了。

注意：我希望你能理解我，我来自巴西，我的英文写得不太好。

【讨论】：

您需要上传到 Cloudinary，显示缩略图，如果用户后悔，则删除图像，或者您需要使用客户端工具在客户端预览图像侧，并在用户单击“提交”后上传到 Cloudinary。 Cloudinary 的路线图为此提供了一个全面的解决方案。