上传图像在react中不返回表单数据值
上传图像在react中不返回表单数据值
提问于 2020-12-15 12:45:44
我想得到上传图像的表单数据值。
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
Stack Overflow用户
回答已采纳
发布于 2020-12-15 12:56:07
要查看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);
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65306114
复制相关文章
相似问题
腾讯云开发者
