반응의 업로드 이미지가 양식 데이터 값을 반환하지 않습니다.
Dec 15 2020
이미지를 업로드하는 양식 데이터 값을 얻고 싶습니다.
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.log("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.log("formadata values", fd);
아무것도 얻지 못합니다.
질문 : 내 코드를 사용하여 양식 데이터를 가져 오는 방법은 무엇입니까?
데모:https://codesandbox.io/s/priceless-flower-82tbe?file=/src/App.js:0-883
답변
1 Ramineghbalian Dec 15 2020 at 19:56
FormData의 값을 보려면 아래와 같이 루프를 사용해야합니다.
for (let value of fd.values()) {
console.log(value);
}
키를 사용하여 특정 데이터의 값을 볼 수도 있습니다.
console.log(fd.get('key'));
또한 루프에서 키 (코드 = "upload")로 여러 파일을 추가 할 때주의해야합니다. 데이터가 재정의되고 끝에 하나만 추가됩니다. 입력으로 여러 파일을 업로드 []
하려면 이름 뒤에 를 사용해야합니다. 아래와 같은 입력 :
const getFileList = e.fileList.map((i) => {
return fd.append("upload[]", i.originFileObj);
});