其实跟 vue 没啥关系，前端实现都共通。

一直用的 direct uploads，没觉得有什么不妥，特别是你里面提到用户等待时间较长这点，用 form 上传，同样也是需要时间啊，direct uploads 也是可以控制的，可以在一个命令之后才开始上传，实现也很简单，不用话什么力气就可以和 element ui 等等的上传控件进行整合了

嗯嗯，之前不知道怎么跟 vue 结合的地方在于 CSRF token 的传递。不过事后看实现方案，其实其他的前端场景也会有这样的问题（CSRF token 传递），然后也可以用这样的方式去处理。

“direct uploads 也是可以控制的，可以在一个命令之后才开始上传”，你的意思是，可以在比如说用户点击提交按钮之后再开始上传？这点之前到没注意。不过这样的话，是不是需要等前端上传完了之后，再发 post 请求给 server？这样控制起来会不会复杂点？不过可以预见的好处是，这样可以不用占用服务器端的流量。

ActiveStorage 有个 DirectUpload 的类，通过手动 create 可以控制它上传的时间，但是要看看源码才理解它怎么用，文档不够详细。

应该怪我描述不到位，activestorege 提供的 DirectUpload 目的是帮你解决从前端 js 直接上传到后端 ruby 文件服务的问题，而是否用户选中文件以后就直接开始上传，这是咱们自己可以控制的事情，就拿 element ui 来说，它的 upload 组件就有一个auto-upload属性可以用来控制是否自动上传，不自动上传的话，自己 submit 就可以，submit 的时候调用 DirectUpload 的代码就可以了，而一般做好以后，切换自动上传和手动上传就是设置上传组件的事情，和 DirectUpload 无关，DirectUpload 只接管上传组件和 Ruby 文件服务之间的事情。

在我的项目里面，我写了一个 vue 的 mixin，代码如下，在需要的地方，使用这个 mixin，然后设置 el-upload 的http-request为 uploadByDirectUpload，设置 element-ui 上传组件的action为 rails 端的rails_direct_uploads_url，然后处理 upload 组件的事件就可以取得上传后的文件信息了，rails 的话，可以通过传回 signed_id 之类的信息，来做后续的文件绑定的操作。代码仅供参考，文件上传之类的事情就是这样，看着很烦，但一次做好以后，所有的地方都可以用了，用 form 有 form 的好处，但我其实后来感觉对于混合前后端来说，form 还可以，对于越来越多的前端完全分离来说，我更喜欢剥离文件和 rails form 之间的关系了。

import { DirectUpload } from "@rails/activestorage";

export default {
  data() {
    return {};
  },

  methods: {
    // 设置`el-upload`组件的`:http-request`为`uploadByDirectUpload`来实现选中文件就上传到服务器，上传成功的文件在`file-list`中会
    // 有`status`为`success`的状态，和之前已有的文件不同的是，新上传的文件会有一个`response`节点，里面包含有从服务器传回的信息，对于
    // rails而言，传回的信息为`blob`对象，里面包括`id`, `signed_id`等，其中`signed_id`可以作为key来赋值给对应的字段完成上传内容的赋值
    // TODO: 增加对`abort`的支持
    uploadByDirectUpload(option) {
      const directUploadDelegator = {
        // callbacks from active storage
        directUploadWillStoreFileWithXHR(xhr) {
          xhr.upload.addEventListener("progress", (event) => {
            const e = { percent: 0, ...event };
            if (event.total > 0) {
              e.percent = (event.loaded / event.total) * 100;
            }
            // console.log("Uploading process at: ", e.percent);
            option.onProgress(e);
          });
        },
      };
      const upload = new DirectUpload(
        option.file,
        option.action,
        directUploadDelegator
      );

      upload.create((error, blob) => {
        if (error) {
          // TODO
          console.error("Error occurred when upload file to backend: ", error);
          option.onError(error);
        } else {
          // console.log("File has been uploaded to backend: ", blob);
          option.onSuccess(blob);
        }
      });
      return upload;
    },

    // 检查el-upload的file-list对应的model字段，返回需要新attach上的内容, `isMultiple`表示该字段是否支持多文件
    //  - 对于支持多文件上传，返回非空数组包含有新上传blog的signed_id，返回空表示没有新上传的文件需要附加
    //  - 对于仅支持单文件上传的情况，返回当前新上传的blog信息，返回false表示文件保持不变，返回null表示清空单文件字段
    newAttachesFromFileList(fileList, isMultiple = false) {
      if (fileList == null || fileList.length <= 0) {
        return null;
      }
      if (isMultiple) {
        const newUploads = [];
        fileList.forEach((element) => {
          if (element.response && element.response.signed_id) {
            newUploads.push(element.response.signed_id);
          }
        });
        return newUploads;
      }
      if (
        fileList[0]
        && fileList[0].response
        && fileList[0].response.signed_id
      ) {
        return fileList[0].response.signed_id;
      }
      return false;
    },
  },
};

太感谢了！我看下，我以为 DirectUpload 是 upload 到 CDN[捂脸]

DirectUpload 是上传到储存后端，根据配置可以是本地文件储存或者 S3 一类的云储存，本地文件储存是由 Rails 提供了一个 API。

印象中 DirectUpload 是这样一个流程：

1. 跟 Rails 后端通信，获得上传 token。
2. 根据上传 token 上传文件到云储存。
3. 上传完毕后返回一个字符串，这个字符串可以被 Model 的 attached 字段解析，提交后保存关联对象和储存信息。

我也用的 vue + element，解决方式是自己构造 formData，把 object 传进去

append(formData, obj, prefix) {
  if (Array.isArray(obj)) {
    for (const item of obj) {
      this.append(formData, item, `${prefix}[]`);
    }
  } else if (typeof obj === 'object') {
    var isObject = false
    for(var prop in obj) {
      if (obj.hasOwnProperty(prop)) {
        isObject = true
      }
    }
    if (isObject) {
      for (const key in obj) {
        var value = obj[key];
        if (value === null || value === undefined) {
          continue;
        }
        this.append(formData, value, `${prefix}[${key}]`);
      }
    } else {
      formData.append(prefix, obj);
    }
  } else {
    formData.append(prefix, obj);
  }
},

用的时候

var formData = new FormData();        
this.append(formData, this.obj, "obj");
this.fileList.map(item => {
  if (item.status === "ready") {
    formData.append("obj[your_attach_association][]", item.raw);
  }
});