Télécharger l'image dans react ne renvoie pas les valeurs des données du formulaire

Question

Je souhaite obtenir des valeurs de données de formulaire en téléchargeant des images.

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>
  );
}

Essayer d'y accéder, console.log("formadata values", fd);je n'obtiens rien.
Question: Comment obtenir les données du formulaire en utilisant mon code?
démo:https://codesandbox.io/s/priceless-flower-82tbe?file=/src/App.js:0-883

Answer 1

pour voir les valeurs dans FormData, vous devez utiliser la boucle comme ci-dessous:

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

vous pouvez également voir la valeur de certaines données en utilisant la clé:

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

Faites également attention à ajouter plusieurs fichiers par une clé (dans votre code = "upload") en boucle, vos données seront écrasées et une seule d'entre elles s'ajoutera à la fin, pour télécharger plusieurs fichiers par une entrée, vous devez utiliser le []après le nom d'entrée comme ci-dessous:

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