gpt4 book ai didi

ruby-on-rails - 如何使用 rails 的 Active Storage 从 Rails 表单中的 将图像上传到 S3?

转载 作者:行者123 更新时间:2023-12-04 07:41:25 24 4
gpt4 key购买 nike

如标题所述,我正在尝试使用 rails 的 Active Storage 从嵌套在 rails 表单中的元素将图像上传到我的 S3 存储桶。
到目前为止,我已经能够使用<%= f.input :signature, type: file_field(:user, :signature), %>使用 Active Storage 上传图像。 User类(class)has_one_attached :signature .当我使用 file_field 时,图像会正确上传,所以这不是问题的一部分。

到目前为止我的 simple_form已:

  <div class="signature_pad text-center form-group">
<div class="signature_pad_heading">
Enter your Signature:
</div>
<div class="signature_pad_body">
<canvas id="signature_pad_input" height="145px" width="370px" style="height: 145px; width: 370px;" class="border" />
</div>
<div class="signature_pad_footer">
<button type="button" class="btn btn-default" onclick="signaturePad.clear()">Clear</button>
</div>
</div>

<%= f.input :signature, type: file_field(:user, :signature), value: "", as: :hidden %>

<%= f.submit "Save", class:'btn-primary btn-lg btn-md-wide', id: "signature_pad_save" %>

我的 javascript 是:
<script src="https://cdn.jsdelivr.net/npm/signature_pad@2.3.2/dist/signature_pad.min.js"></script>
<script>
const canvas = document.querySelector("canvas");
const signaturePad = new SignaturePad(canvas);

$('#signature_pad_save').click(function(event) {
if (signaturePad.isEmpty()){
alert('Please enter your signature.');
event.preventDefault();
} else {
$('#user_signature').val(
JSON.parse(
signaturePad.toDataURL()
);
}});
</script>

使用 .toDataURL 我可以获得图像的 base64,我读过的所有内容似乎都指出我需要通过 Active-Storage 发送到 S3。

最后:

我使用 .file_field 时发送的内容
"signature"=>"<ActionDispatch::Http::UploadedFile:0x007f7a02ad4ef8 @tempfile=#<Tempfile:/tmp/RackMultipart20180903-3527-kked3g.png>, @original_filename="signature1.png", @content_type="image/png", @headers="Content-Disposition: form-data; name=\"user[signature]\"; filename=\"signature1.png\"\r\nContent-Type: image/png\r\n">},"

当我尝试在表单提交之前插入值时我发送的内容
"signature"=>"#<ActiveStorage::Attached::One:0x007f7a01c8b4f0>"}

最佳答案

是的,这是可能的。

直接上传由 DirectUpload 处理类(或 ActiveStorage.DirectUpload 取决于您访问事物的方式)。通常 DirectUpload想要一个 File 读取图像但足够方便, File Blob 所以你几乎可以使用 Blob反而。 Active Storage 只需要它的"file"中的一些东西,而且几乎所有这些东西都存在于 Blob 中。 ,唯一缺少的是一个 name属性,您可以自己添加。

所以现在我们需要得到一个 Blob出 Canvas 。这实际上很容易,因为 Canvas 有 toBlob method :

The HTMLCanvasElement.toBlob() method creates a Blob object representing the image contained in the canvas; this file may be cached on the disk or stored in memory at the discretion of the user agent.



首次设置 direct uploads as usual .然后为整个表单添加您自己的提交处理程序,大致如下所示:
const form   = your_form_element;
const canvas = your_canvas_element;
const input = your_file_input;

canvas.toBlob(blob => {
// Fake out DirectUpload by manually adding a name.
blob.name = input.files[0].name;

const uploader = new DirectUpload(blob, input.dataset.directUploadUrl);
uploader.create((error, blob) => {
if(error) {
// Handle the error.
}
else {
// Add the <input type="hidden"> with the signature.
const hiddenField = document.createElement('input')
hiddenField.setAttribute('type', 'hidden');
hiddenField.setAttribute('value', blob.signed_id);
form.appendChild(hiddenField);

// And submit away...
form.submit();
}
});
}, 'image/jpeg', 0.95);

假设您需要 JPEG,您可以根据需要使用其他内容类型,也可以将其与原始内容匹配。我还遗漏了一些常用的提交处理程序样板。如果您已经设置了常用的全局直接上传处理程序,那么它们将在此处用于进度条等;如果你没有这些,那么你必须自己处理,上面链接的指南对所有这些都有指导。

关于ruby-on-rails - 如何使用 rails 的 Active Storage 从 Rails 表单中的 <canvas/> 将图像上传到 S3?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52156108/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com