Я хочу получить значения данных формы для загрузки изображений.
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
чтобы увидеть значения в 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);
});