我有一个Rails表单，文件字段指向ActiveStorage . 使用MediaRecorder API（和Safari的polyfill），我还 Build 了一个录音机 .
到目前为止一直这么好：在提交表单之前，录制的音频可以附加到 <audio> 元素并播放 . 如下所示，代码将作为blob添加到 <audio> 标记中 .
<audio controls="" data-target="audio-player.player" preload="true" src="blob:http://localhost:3000/5bb2e66f-afc0-6a46-b3f5-a95564afca55"</audio>
该表单还允许定期文件上传音频文件，该文件可以使用，并使用ActiveStorage存储，如下所定义：
has_one_attached :audio_file
现在我想提交整个表单，包括音频到Rails . 问题是由于浏览器安全性限制，无法直接设置 file_field .
所以我正在尝试一种解决方法：捕获表单 submit ，序列化它并使用 fetch 进行POST . 这也有效（表格需要 remote: true ），现在唯一缺少的是音频 .
工作回调是：
var form = self.fileFieldTarget.form;
form.addEventListener('submit', function(e){
e.preventDefault();
fetch(e.target.action, {
method: 'POST',
body: new URLSearchParams(new FormData(e.target))
}).then((resp) => {
console.log(resp);
});
});
我看到两个选择：
1）以某种方式将编码的音频添加到表单json中，并将其视为ActiveStorage对象，然后将它们全部一起提交 . 2）在保存表单的其余部分后，单独调用以仅加载音频
如果某些HTML / JS看起来有点奇怪，我将它全部包装在StimulusJS中 . 如果需要，我很乐意分享所有的录音代码 .
