如何处理图像数据 uri 并通过回形针上传到 S3？答案

【问题标题】：How can I process an image data uri and upload to S3 via paperclip?如何处理图像数据 uri 并通过回形针上传到 S3？
【发布时间】：2014-06-18 16:42:31
【问题描述】：

我正在编写一个 Rails 应用程序，它从网络摄像头捕获图像，将其覆盖在 /public 中的图像上，然后通过回形针将结果上传到 Amazon S3。我编写了一些 Javascript 来获取网络摄像头图像作为数据 uri，但我不知道如何将其发送到我的服务器进行处理并通过回形针将结果上传到 S3。

我查看了https://gist.github.com/WizardOfOgz/1012107、How to save a raw_data photo using paperclip，并阅读了回形针源代码，但我仍然无法弄清楚。

【问题讨论】：

标签： ruby-on-rails paperclip data-uri

【解决方案1】：

我最终发送了一个 AJAX 请求，并将我的模型的图像属性设置为数据 uri。 Paperclip 会自动检测到它是一个数据 uri 并对其进行适当处理。我编写了一个自定义回形针处理器来进行图像编辑并使编辑后的图像在 S3 上可用。

【讨论】：

【解决方案2】：

我自己也遇到了这个问题。我想出的解决方案适用于现代浏览器（IE9+/chrome/FF/Safari）。不确定这是否是你可以忍受的。如果是这样：

1) 您必须将 dataURI 发布到您的服务器。我认为通过标准表单提交是不可能的，但您可以使用通过 XHR 发送的 HTML5 FormData 来完成。查看这个关于使用 jQuery 异步发布表单的基础知识的 SO 条目：How can I upload files asynchronously?

或者，如果你碰巧像我一样使用 Angular，你可以使用 angular-file-upload 库https://github.com/danialfarid/angular-file-upload

按照该帖子中的说明创建 formData 对象后，您可以将 dataURI 添加到其中：

var formData = new FormData($('form')[0]);
formData.uploadImage = yourDataURI;
$.ajax({ // ... set up your ajax post as described in https://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously-with-jquery
});

2) 一旦你发布了数据 uri，服务器端就很容易了。 Paperclip 支持开箱即用的数据 uri，只需将回形针附件设置为等于您的数据 uri。如果您有一个名为 ImagePost 的 ActiveRecord 对象，以及一个名为 overlayed_image 的回形针附件属性，您的控制器可能如下所示：

def update
  image_post = ImagePost.find(params[:id])
  if params['uploadImage']
    image_post.overlayed_image = params[:uploadImage]
  end
  # rest of your controller code goes here
end

【讨论】：