React 文件上传返回未定义答案

【问题标题】：React file upload returns undefinedReact 文件上传返回未定义
【发布时间】：2021-09-01 18:06:20
【问题描述】：

所以我试图将图像发送到我的 node.js api，但记录图像挂钩返回未定义。我尝试了多种方法，但每次我得到相同的未定义消息时，我都尝试过useState([])、useState("")，甚至是下面显示的示例。请帮助结束我的痛苦

import Cookies from "universal-cookie";
import FormData from "form-data";

export const CreateRecipe = () => {

  const storageUrl = `http://${process.env.REACT_APP_API_URL}/storage/new`;
  const cookies = new Cookies();
  const token = cookies.get("token");

  const [fileData, setFileData] = useState();
  const getFile = (e) => {
    setFileData(e.target.files[0]);
    console.log(fileData);
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    const formData = new FormData();
    formData.append("image", fileData);
    fetch(storageUrl, {
      method: "POST",
      headers: {
        Authorization: "Bearer " + token,
        "Content-Type": "multipart/form-data",
      },
      body: formData,
    })
      .then((res) => res.json())
      .then((data) => {
        if (data.error) {
          alert(data.message);
        } else {
          console.log(data);
        }
      });
  };

  return (
    <div id="create-recipe">
      <form onSubmit={handleSubmit}>
        <input
          type="file"
          name="image"
          accept="image/*"
          //style={{ display: 'none' }}
          onChange={getFile}
        />
        <button type="submit">Post </button>
      </form>
    </div>
  );
};

【问题讨论】：

尝试设置一个与上传的文件数据相等的变量，然后将其附加到 formData。
我试过了，changeHandler 将钩子显示为未定义，而不仅仅是 formData
看看这个链接是否有帮助。 pluralsight.com/guides/…

标签： reactjs

【解决方案1】：

const [fileData, setFileData] = useState();

将 useState 更改为这样的空数组

const [fileData, setFileData] = useState([]);

您的代码几乎是正确的，需要注意的是，当您的输入类型是文件时，当您选择所有文件时，onChange 方法只会运行一次。你可以这样检查。

const getFile = (e) => {
 console.log("no of files ",e.target.files.length);
  };

选择所有图像后，您将在控制台中仅看到一次“此文件数”。

您需要为每个图像设置 FileData。一种方法是..

const getFile = (e) => {
 const len = e.event.files.length;
 for(let i=0; i<len; i++){
    setFileData(e.target.files[0]);
    console.log(fileData);
 }
};

现在这肯定会奏效。

【讨论】：