Не удается обернуть файл в данные формы и POST для выражения конечной точки - PullRequest
Новая
       44

Не удается обернуть файл в данные формы и POST для выражения конечной точки

0 голосов
/ 13 апреля 2019

У меня 2 желания. 1. Я хочу опубликовать mp3-файл, используя fetch. 2. Для этого я предполагаю, что хочу обернуть его в объект данных формы. Я могу успешно сохранить этот mp3-файл в моем состоянии реакции. Проблема в том, что когда я пытаюсь извлечь этот файл с помощью this.state.myFile и добавить этот файл к ключу, а затем console.log, переменная formData, она пуста (я полагаю, потому что требуется некоторое время, чтобы назначить mp3 файл 12 МБ). и js просто переходит прямо к следующей строке и пытается записать ее до фактического завершения назначения). В любом случае, если я могу сделать это, я могу просто установить тело выборки: myFormDataVar и правильно установить соответствующие заголовки?

ex mp3-файл для отправки (~ 13 МБ):

Файл {name: "tranceLead2.mp3", lastModified: 1555115855246, lastModifiedDate: Fri Apr 12 2019 19:37:35 GMT-0500 (центральное дневное время), webkitRelativePath: "", размер: 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);
        });

1 Ответ

0 голосов
/ 13 апреля 2019

FormData - сложный объект, который не сериализует свои записи при записи экземпляра на консоль.

Все, что вы увидите, это методы-прототипы. Чтобы получить доступ к тому, что в нем, вам нужно использовать методы API, такие как values(), get(), entries() и т. Д., Некоторые из которых возвращают итерации. Методы и возвраты аналогичны 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()]);
...