Загрузка изображения в ответ не возвращает значения данных формы

Я хочу получить значения данных формы для загрузки изображений.

import React from "react";
import "./styles.css";
import { Upload, Button, Form } from "antd";

export default function App() {
  const normFile = (e) => {
    const fd = new FormData();
    const getFileList = e.fileList.map((i) => {
      return fd.append("upload", i.originFileObj);
    });
    console.info("formadata values", fd);
    if (Array.isArray(e)) {
      return e;
    }
    return e && e.fileList;
  };
  return (
    <div className = "App">
      <div>
        <Form name = "form" className = "form">
          <Form.Item
            name = "upload"
            className = "upload"
            valuePropName = "fileList"
            getValueFromEvent = {normFile}
          >
            <Upload name = "img" listType = "picture">
              <Button className = "btn">upload images</Button>
            </Upload>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
}

Пытаюсь получить доступ console.info("formadata values", fd); ничего не получается.
Вопрос: Как получить данные формы с помощью моего кода?
демо: https://codesandbox.io/s/priceless-flower-82tbe?file=/src/App.js:0-883

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
0
793
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

чтобы увидеть значения в FormData, вы должны использовать цикл, как показано ниже:

for (let value of fd.values()) {
   console.info(value);
}

вы также можете увидеть значение определенных данных с помощью ключа:

console.info(fd.get('key'));

Также будьте осторожны с добавлением нескольких файлов с помощью ключа (в вашем коде = «загрузить») в цикле, ваши данные будут переопределены, и только один из них будет добавлен в конце, для загрузки нескольких файлов с помощью ввода вы должны использовать [] после имя ввода, как показано ниже:

const getFileList = e.fileList.map((i) => {
   return fd.append("upload[]", i.originFileObj);
});

Другие вопросы по теме