Question

我在Ruby中有以下表格：

<%= form_for @user, html: {role: "form"} do |f| %>

  <div class="form-group">
    <%= f.label :name %>
    <%= f.text_field :name, :class => "form-control" %>
  </div>

  <div class="form-group">
    <%= f.label :picture, "Picture" %>
    <%= f.file_field :picture, :class => "form-control" %>
  </div>

  <%= f.button "Save Changes", class: "btn btn-primary" %>
<% end %>

我想要的是表格中所选图片的Base64字符串，以便将其保存在数据库中。

当我选择某些内容并将其发送给控制器时，它会给我这样的内容：

#<ActionDispatch::Http::UploadedFile:0x0000000517a570>

我不想使用插件将图片保存在服务器上，因为它只是一个小系统。

有没有人知道如何在控制器中做什么？

感谢。

Answer 1

这是未经测试的，但应该让你朝着正确的方向前进

file_upload = params[:user][:picture].tempfile
user.picture_base64 = Base64.encode64(file_upload)

假设：

您的用户模型的属性picture_base64是文本类型
该文件作为[:user][:picture]

Answer 2

我不知道，不管它是好还是不好，但我喜欢我找到的解决方案：

我的表单现在看起来像：

<%= form_for @user, html: {role: "form"} do |f| %>

    <div class="form-group">
        <%= f.label :name %>
        <%= f.text_field :name, :class => "form-control" %>
    </div>
    <div class="form-group">
        <label for="filePicker">Choose a picture:</label><br>
        <input type="file" id="filePicker" class="form-control">
    </div>
    <div class="invisible">
        <%= f.label :picture, "Picture" %>
        <%= f.text_field :picture, :class => "form-control" %>
    </div>

    <img id="img_preview" src="<%= current_user.picture %>" style="width:200px; height: auto; margin-bottom: 15px;"/>

    </br>

    <%= f.button "Save Changes", class: "btn btn-primary" %>
<% end %>

我有input type="file"我在哪里选择图片。它在javascript中呈现为base64字符串并显示为预览。当img已经存在时，它就显示出来了。

我的javascript看起来像：

<script>
var handleFileSelect = function(evt) {
    var files = evt.target.files;
    var file = files[0];

    if (files && file) {
        var reader = new FileReader();

        reader.onload = function(readerEvt) {
            var binaryString = readerEvt.target.result;
            var fileending = file.type;
            if(fileending == "image/jpeg")
            {
                fileending = "image/jpg";
            }
            var test = btoa(binaryString);
            var final = "data:"+fileending+";base64,"+test;
            document.getElementById("img_preview").src = final
            document.getElementById("user_picture").value = final
        };

        reader.readAsBinaryString(file);
    }
};

if (window.File && window.FileReader && window.FileList && window.Blob) {
    document.getElementById('filePicker').addEventListener('change', handleFileSelect, false);
} else {
    alert('The File APIs are not fully supported in this browser.');
}
</script>

因为我需要像data:image/jpg;base64,BASE_64_STRING这样的东西我读取文件类型并将其添加到String中。我在使用jpeg和jpg时遇到了麻烦。这就是为什么我将它们全部更改为jpg。

现在我将我创建的字符串添加到不可见（css：display:none）text_field并将其发送到控制器，我将其保存为简单字符串。

这只是我的解决方案。有更好的方法，但我喜欢我的方式。

唯一的问题是图片的大小。我会在我的项目中做一个限制。

从file_field获取表单中的Base64字符串

2 个答案: