new FormDataを使って更新した値をサブミットした後、fetchで送りphp側の$_POSTや$_FILESで受け取りたい。

Question

javascriptとPHPで音声ポートフォリオを作っているものです。
postForm.set()でタイトルとオーディオデータの値を上書きしたものをfetchAPIでphp側に送り、$_POSTや$_FILESで受け取りたいのですがvar_dump()でみてみると上書きされていないです。どうしたら思い通りの動きになるでしょうか。お力頂きたいです。宜しくお願いします。

コード
<form action="" method="post" id="upload_form" enctype="multipart/form-data">
        <input type="text" value="タイトル" name="title">
        <input class="upload_hidden offset-9" type="file" id="sound" accept="audio/*" name="sound">
        <div id="button"></div>

    </form>

コード
    <script src="https://unpkg.com/@ffmpeg/ffmpeg@0.9.4/dist/ffmpeg.min.js"></script>
    <script>
        const sound = document.getElementById('sound');
        const button = document.getElementById('button');
        
        const {
            createFFmpeg,
            fetchFile
        } = FFmpeg;
        const ffmpeg = createFFmpeg({
            log: true
        });
        const transcode = async ({
            target: {
                files
            }
        }) => {
            await ffmpeg.load();
            ffmpeg.FS('writeFile', 'music', await fetchFile(files[0]));
            await ffmpeg.run('-i', 'music', '-vn', '-ac', '2', '-ar', '44100', '-acodec', 'pcm_s16le', '-f', 'wav', 'output.wav');

            const data = ffmpeg.FS('readFile', 'output.wav');

            dataUrl = URL.createObjectURL(new Blob([data.buffer], {
                type: 'audio/wav'
            }));
           
            const fileTitle = (() => {

                const files = sound.files;
                const reader = new FileReader();
                reader.readAsDataURL(files[0]);

                reader.onload = () => {
                    button.innerHTML = '<button type="submit" id="submit">アップロードする</button>'
                    const submit = document.getElementById('submit');
                    
                    submit.addEventListener('click', (e) => {
                    e.prevantDefault();    
postForm = new FormData(document.forms.upload_form);
                        const sliceData = new Blob([data.buffer], {type: "audio/wav"});
                        postForm.set('title', '上書きしたい値');
                        postForm.set('sound',sliceData,'audio')

                        console.log(sliceData);
                        for (let data of postForm) {
                            console.log(data);
                        }
                        const form = {
                            method: 'POST',
                            body: postForm
                        }

                        fetch('main.php', form)
                            .then((res) => res.json())
                            .then(console.log);
                    });
                };
            })
            fileTitle();
        }
        sound.addEventListener('change', transcode);
    </script>

コード
var_dump($_POST['title']);

Comments

[1T2R3M4]

https://ja.stackoverflow.com/questions/75025

以下ご対応ください。
https://teratail.com/help#posted-otherservice

Answer 1

type=submitをclickしたらページ遷移するのでfetchされないのでは？
コールバックでイベントをうけてpreventDefault()してみてください
ファイルの送り込みは

const blob=new Blob([data.buffer], {type: 'audio/wav'});
postForm.set('sound',blob,filename);

としてください

Comments

[fuyukixxx]

回答ありがとうございます。上記の通り試しましたがエラーがでてうまくいきません。
VM80:1 Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0
のエラーがでてしまいます。

[fuyukixxx]

$_POSTに反映されてました。ブラウザのXHRを見て確認したらわかりました。回答ありがとうございました。