The question of curiosity is why the data in the FormData instance FormData not visible when outputting to the console, but is it also visible in the Network tab? I made a conclusion to the console just before sending, the object is the same.

enter image description here

 // Π²Ρ‹Π΄Π΅Ρ€ΠΆΠΊΠΈ ΠΈΠ· ΠΊΠΎΠ΄Π° ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° Vue const formData = new FormData(); Object.keys(this.data).forEach(key => { formData.append(key, this.data[key]); }) console.log(formData) //ΠΌΠ΅Ρ‚ΠΎΠ΄ ΠΎΡ‚ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠΉ post-запрос Π½Π° сСрвСр. this.$API.post(path, formData, {'Content-Type': 'multipart/form-data'}).then()... //ΠΏΠΎΠ΄ ΠΊΠ°ΠΏΠΎΡ‚ΠΎΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ axios //.. Π²Ρ‹Π΄Π΅Ρ€ΠΆΠΊΠ° ΠΈΠ· конструктора post(path, payload, headers = { 'Content-Type': 'application/json' }) { return this.service.request({ headers, method: 'POST', url: path, responseType: 'json', data: payload, }); }
  • add some code as you sent and log did - Grundy
  • @Grundy made - Dmytryk
  • Not visible because at the time of viewing this object is already empty (in the log link) - JavaJunior
  • @JavaJunior, I also thought so and tried to exclude any actions, after the withdrawal - the result is the same. In the comments to the first answer @eustatos, said that the Π΄Π°Π½Π½Ρ‹Π΅ ΠΏΠΎΠ»Π΅ΠΉ Ρ„ΠΎΡ€ΠΌΡ‹ - ΠΏΡ€ΠΈΠ²Π°Ρ‚Π½Ρ‹Π΅ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹Π΅ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° FormData - and this is very similar to the truth - Dmytryk
  • @ Dmytryk, apparently such a implementation in the browser. Here are a few options usually with the help of a cycle advise, but there is an interesting answer :) - Grundy

2 answers 2

Since FormData is an interface provided by the browser, the internal organization may depend on specific browsers.

In addition to this, console.log output is also not specified, which further adds the capabilities of different output in different browsers.

What can be seen in the chrome console?

  1. the prototype is set to FormData
  2. The prototype contains all the methods described in the specification.

the rest of the output is at the discretion of the particular browser.

If you look in the specification, each FormData object has an associated list with values.

Since it is associated , it may not be part of the object , hence the current conclusion is fully justified.

    FormData has methods for displaying content.

     const form = document.forms['example-form']; const exampleInput = document.querySelector('[name="example"]'); exampleInput.addEventListener('change', changeHandler); function changeHandler() { const formData = new FormData(form); for (key of formData.keys()) { console.log(`${key}: ${formData.get(key)}`); } } 
     <form id="example-form"> <input name="example"> </form>

    • hold +). But I did not ask "how to get the data?", I asked "why they are not visible?" - Dmytryk
    • Form field data are private variables of the FormData object. He has only public methods. - eustatos