如何在 Rails4 中使用 Carrierwave 在 Blob 中保存 base64 图像？答案

【问题标题】：How to save base64 image in Blob with Carrierwave in Rails4?如何在 Rails4 中使用 Carrierwave 在 Blob 中保存 base64 图像？
【发布时间】：2014-03-09 13:52:22
【问题描述】：

如this Tutorial 中所述，我将画布转换为 DataUrl，并将此 DataUrl 转换为 Blob。然后我发出一个 ajax 发布请求，并希望使用 Carrierwave 将图像保存在数据库中。

这是我的 JS 代码：

uploadButton.on('click', function(e) {

  var dataURL = mycanvas.toDataURL("image/png;base64;");

  // Get our file
  var file= dataURLtoBlob(dataURL);

  // Create new form data
  var fd = new FormData();

  // Append our Canvas image file to the form data
  fd.append("image", file);

  // And send it
  $.ajax({
    url: "/steps",
    type: "POST",
    data: fd,
    processData: false,
    contentType: false,
  });
});

// Convert dataURL to Blob object
function dataURLtoBlob(dataURL) {

  // Decode the dataURL
  var binary = atob(dataURL.split(',')[1]);

  // Create 8-bit unsigned array
  var array = [];
  for(var i = 0; i < binary.length; i++) {
    array.push(binary.charCodeAt(i));
  }

  // Return our Blob object
  return new Blob([new Uint8Array(array)], {type: 'image/png'});
}

当我将以下代码添加到我的控制器时，图像会被保存，但当然不是通过载波。

File.open("#{Rails.root}/public/uploads/somefilename.png", 'wb') do |f|
  f.write(params[:image].read)
end

更新信息：

这些是我的 ajax 发布请求的参数：

Parameters: {"image"=>#<ActionDispatch::Http::UploadedFile:0x007feac3e9a8a8 @tempfile=#<Tempfile:/var/folders/0k/q3kc7bpx3_51kc_5d2r1gqcc0000gn/T/RackMultipart20140211-1346-gj7kb7>, @original_filename="blob", @content_type="image/png", @headers="Content-Disposition: form-data; name=\"image\"; filename=\"blob\"\r\nContent-Type: image/png\r\n">}

这些是标准文件上传的参数：

Parameters: {"utf8"=>"✓", "image"=>{"image"=>#<ActionDispatch::Http::UploadedFile:0x007feac20c2e20 @tempfile=#<Tempfile:/var/folders/0k/q3kc7bpx3_51kc_5d2r1gqcc0000gn/T/RackMultipart20140211-1346-1ui8wq1>, @original_filename="burger.jpg", @content_type="image/jpeg", @headers="Content-Disposition: form-data; name=\"image[image]\"; filename=\"xy.jpg\"\r\nContent-Type: image/jpeg\r\n">}}

如果我这样做 Image.create(params[:image]) 我有事务回滚...

事务回滚错误：

Unprocessable Entity
ActiveRecord::RecordInvalid (Validation failed: image You are not allowed to upload "" files, allowed types: jpg, jpeg, gif, png)

【问题讨论】：

如果将params[:image] 分配给carrierwave-mounted 属性会发生什么？
所以我创建了Image.create(image: params[:image])，但它回滚了事务...
什么错误导致它回滚？您可以使用Image.create!(...)（带有感叹号）来强制引发异常。我从您的帖子中看到的唯一主要区别是上传文件缺少扩展名（名为“blob”）。您可以通过将 .png 附加到文件名（和 original_filename），然后将其传递给 create 方法来解决此问题。

标签： ruby-on-rails base64 blob carrierwave data-uri

【解决方案1】：

我只是想添加，您可以在附加 blob 的同时在视图中添加文件类型。

  // Get our file
  var file = dataURLtoBlob(dataURL);

  // Create new form data
  var fd = new FormData();

  // Append our Canvas image file to the form data
  fd.append("image", file, "blob.jpg");

在我们定义文件名时注意结尾。希望这对某人有所帮助。

来源：https://developer.mozilla.org/en-US/docs/Web/API/FormData/append

【讨论】：

【解决方案2】：

您将允许的文件类型列入白名单。默认情况下，Carrierwave 将尝试通过文件扩展名来确定文件类型 - 因为这实际上是一个 Blob 对象，所以没有传递它。因此，您会收到有关文件“类型”的验证错误。要解决此问题，只需为 blob 对象附加预期的文件扩展名：

if params[:image].try(:original_filename) == 'blob'
  params[:image].original_filename << '.png'
end

Image.create!(image: params[:image])

【讨论】：

自己实现了这个。这太棒了。谢谢。