12

如果我有一张在客户端上使用 JavaScript 编辑/生成的图像(例如,裁剪的照片或画布绘制的结果),有没有办法使用 ActiveStorage 上传它?

它通常是一个包含"<img src='data:image/jpeg;base64,...=='>"存储在 JavaScript 变量中的大字符串,而不是文件。

4

5 回答 5

10

你可以这样做:

decoded_data = Base64.decode64(params[:base64].split(',')[1])
resource.image = { 
  io: StringIO.new(decoded_data),
  content_type: 'image/jpeg',
  filename: 'image.jpg'
}
于 2019-11-15T00:43:47.693 回答
4

这有一个宝石。

看看https://github.com/rootstrap/active-storage-base64

安装 gem 后非常简单。

class User < ActiveRecord::Base
  include ActiveStorageSupport::SupportForBase64
end


class User < ApplicationRecord
  has_one_base64_attached :avatar
end

分配给模型的实例是通过以下方式完成的:

base64 = 'data:image/png;base64,[base64 data]'
user.avatar = {data: base64}
于 2019-12-30T08:16:43.637 回答
1

据我所知,Active Storage 目前没有对此的原生支持。

也许这个 Rails 问题有对您有帮助的更多信息。

我们已经使用 Shrine(及其DataURI 插件)实现了数据 URI 上传,并且正在等待有合适的方法使用 Active Storage 执行此操作,然后我们将进行迁移。

于 2018-05-15T22:38:04.213 回答
0

我没有宝石就做到了。

          Model.create!(
            product: product,
            attachment: { 
              io: StringIO.new(Base64.decode64(params[:product][:base_64_image].split(',')[1])),
              content_type: 'image/jpeg',
              filename: 'image.jpeg'
            }
          )
于 2022-01-13T22:32:09.097 回答
0

除了Diego Carrion回答

我确实喜欢这个。

class Booking < ApplicationRecord
  ...
  has_one_attached :signature
  ...


module Api
  module V1
    class BookingsController < Api::V1::ApiController
    ...
    
      def confirm_hire_details
        booking = current_user.bookings.find(params[:id])

        if booking.update(booking_params.merge(
          {
            signature: signature_decoded
          }
        ))
          ...
        else
          ...
        end
      end

      private

      def signature_decoded
        decoded_data = Base64.decode64(params[:signature].split(',')[1])
        {
          io:           StringIO.new(decoded_data),
          content_type: 'image/jpeg',
          filename:     "signature-#{Time.current.to_i}.jpg"
        }
      end
于 2021-08-03T05:05:45.800 回答