在react中上传图像不返回表单数据值

IT技术 javascript reactjs
2021-05-11 02:56:03

我想获取上传图像的表单数据值。

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个回答

要查看 FormData 中的值,您必须使用如下循环:

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

您还可以使用键查看某个数据的值:

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

还要注意在循环中通过一个键(在您的代码 =“上传”中)附加多个文件,您的数据将被覆盖,并且只有其中一个附加在最后,对于通过输入上传多个文件,您必须[]在名称之后使用输入如下:

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