如何使用Rails Active Storage在视图中显示临时文件图像

Question

在rails 6应用程序中，我使用活动存储将文件上传到cloudinary。我有一个功能，我想在提交表单之前预览它。这还要求我在提交之前预览上传的图像，该图像仍然是临时文件。我正在create.html.erb中设置预览。这就是我尝试在create.html.edb中预览图像临时文件的方式，但它不起作用。

<%= image_tag params[:company][:logo].path %>

这就是我的公司模型看起来像的样子

class Company < ApplicationRecord
belongs_to :user
has_one_attached :logo
end

如何在视图中显示临时图像？

Answer 1

我想如果你还没有提交表单，它还没有上传。

在这种情况下，您可以显示仍在浏览器中的图像。

它应该是这样的：

function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();

reader.onload = function(e) {
$('#blah').attr('src', e.target.result);
}

reader.readAsDataURL(input.files[0]); // convert to base64 string
}
}
$("#imgInp").change(function() {
readURL(this);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form runat="server">
<input type='file' id="imgInp" />
<img id="blah" src="#" alt="your image" />
</form>

看看这个问题可以了解更多细节：在上传图像之前预览图像。