无法在form-data和POST中包装文件来表达端点

Question

我有2个欲望。我想用fetch发布一个mp3文件。为了做到这一点，我假设，我想将它包装在一个表单数据对象中。我可以成功地将这个mp3文件存储在我的反应状态中。问题是当我尝试使用this.state.myFile检索该文件并将该文件追加到一个密钥然后将console.log附加到formData变量时，它是空的（我假设因为它需要一段时间来分配12mb mp3文件并且js直接进入下一行并尝试在赋值实际完成之前记录它。无论如何，如果我能够这样做，我可以设置获取正文：myFormDataVar并设置适当的标题对吗？

ex mp3文件发送（~~ 13mb）：

文件{name：“tranceLead2.mp3”，lastModified：1555115855246，lastModifiedDate：Fri Apr 12 2019 19:37:35 GMT-0500（Central Daylight Time），webkitRelativePath：“”，size：12851270，...}

我很感激帮助。下面是我在函数内部的客户端代码：

let form_data = new FormData();

// NOT working for me
form_data.append("title", this.state.title); //from react state
form_data.append("track", this.state.file);  //from react state
// NOT working for me

console.log(form_data); // '{}' <-- output

fetch('http://localhost:8080/tracks', {
            method: 'POST',
            body: form_data,
            headers: {
                'Content-Type': 'multipart/form-data'
            }
        }).then(res => {
            if (res.status !== 200 && res.status !== 201) {
                console.log("Did not send...");
                throw new Error("Failed...");
            }
            console.log("Status: " + res.status);
        }).catch(err => {
            console.log(err);
        });

Answer 1

FormData是一个复杂的对象，当您将实例登录到控制台时，它不会序列化它的条目。

您将看到的只是原型方法。要访问其中的内容，您需要使用API​​方法，如values()，get()，entries()等，其中一些返回iterables。方法和回报类似于Map

const f = new FormData()

f.append('foo', 'bar');
f.append('arr', JSON.stringify([1,2,3]))

console.log('get:', f.get('foo'));
console.log('entries:', [...f.entries()]);
console.log('values:', [...f.values()]);