是否可以将 ActiveStorage 配置为在附加文件后立即开始上传，而不是在单击提交按钮时开始上传？答案

【问题标题】：Can ActiveStorage be configured to start uploading as soon as the file is attached, as opposed to when the submit button is clicked?是否可以将 ActiveStorage 配置为在附加文件后立即开始上传，而不是在单击提交按钮时开始上传？
【发布时间】：2023-04-04 02:55:02
【问题描述】：

我喜欢 Rails 5.2 中用于文件上传的新 ActiveStorage 模块的外观，但在我为我的网站重写大量代码之前，看起来上传只有在用户单击提交按钮时才开始。

有谁知道是否可以将 ActiveStorage 配置为在附加文件后立即上传？

【问题讨论】：

是的，您可以使用 DirectUpload JS 类的活动存储

标签： ruby-on-rails rails-activestorage

【解决方案1】：

我不认为它内置在主动存储中。我还没有阅读过 Active storage 中的任何此类功能。

基本上，Active storage 开发背后的想法是提供载波/回形针的内置替代品，并直接上传到 cloud s3/google cloud。

可以使用一些 JS。因为您可以通过将图像部分创建为单独的表单并使用 javascript 提交来手动提交。

【讨论】：

【解决方案2】：

是的，可以使用“DirectUpload”类的活动存储。它是activestorage内部用来创建文件对象并直接上传到指定服务的javascript类。

您可以使用处理文件更改事件并创建“DirectUpload”类的对象，在附加文件后立即创建直接上传文件。

这是一个简单的例子

import { DirectUpload } from "activestorage"

  // on file selection or change {
  const url = element.dataset.directUploadUrl
  const upload = new DirectUpload(file, url)

  upload.create((error, blob) => {
    if (error) {
      // Handle the error
    } else {
      // Add an appropriately-named hidden input to the form with a value of blob.signed_id
      $('<input>').attr({
        type: 'hidden',
        name: 'your_object[files][]',
        value: blob.signed_id
      }).appendTo('form');
    }
  })
// }

上传到 activestorage 后，您可以使用

提交表单

$("form").submit()

这会将这些上传附加到您的 rails 模型对象。请记住，您必须更新带有签名 ID 的表单，否则它不会将上传附加到您的模型对象。

我最近在我的一个项目中使用了上述流程。

【讨论】：

导入也可以是import { DirectUpload } from "@rails/activestorage"