FormData（）是发送输入字段的值，而不是将文件从React发送到Express Server？

Question

我正在使用React，并尝试将表单输入以及图像文件发送到同一时间。我尝试通过将这些输入数据和文件附加到FormData（）并通过Axios Post Request将其发送到后端来尝试，但是问题是：用户给出的表单输入非常适合表示服务器，但在后端

中不确定文件。我的JSX

<form onSubmit={sendData}>
        <input value={data.productName} onChange={handleChange} type="text" name="productName" />
        <input value={data.productfeatures} onChange={handleChange} type="text" name="productfeatures" />

        <input onChange={imgChnage} type="file" name="test_files" />
        <button>Submit</button>
</form>

我处理输入的功能

const [data, setData] = useState({
    productName: "",
    productfeatures: "",
  })
  const { productName, productfeatures } = data;
  const [imgHolder, setImgHolder] = useState();
  const handleChange = (evt) => {
    const value = evt.target.value;
    setData({
      ...data,
      [evt.target.name]: value
    });
  }
  const imgChnage = (e) => {
    setImgHolder(e.target.files[0]);
  };
  console.log(imgHolder);
  const sendData = async (e) => {
    e.preventDefault();
    const fd = new FormData();
    fd.append('name', productName);
    fd.append('features', productfeatures);
    fd.append('image', imgHolder);
    try {
      await axios
        .post("http://localhost:3001/pnit/v1/api/product", fd)
    } catch (error) {
      console.log(error);
    }

所有组合代码

 import { useState } from "react";
    import axios from "axios";
    function App() {
      const [data, setData] = useState({
        productName: "",
        productfeatures: "",
      })

      const { productName, productfeatures } = data;
      const [imgHolder, setImgHolder] = useState();

      const handleChange = (evt) => {
        const value = evt.target.value;
        setData({
          ...data,
          [evt.target.name]: value
        });
      }


      const imgChnage = (e) => {
        setImgHolder(e.target.files[0]);
      };
      
      const sendData = async (e) => {
        e.preventDefault();
        const fd = new FormData();
        fd.append('name', productName);
        fd.append('features', productfeatures);
        fd.append('image', imgHolder);
        try {
          await axios
            .post("http://localhost:3001/pnit/v1/api/product", fd)
        } catch (error) {
          console.log(error);
        }
    
      }
    
      return (
        <>
          <form onSubmit={sendData}>
        <input value={data.productName} onChange={handleChange} type="text" name="productName" />
        <input value={data.productfeatures} onChange={handleChange} type="text" name="productfeatures" />

        <input onChange={imgChnage} type="file" name="test_files" />
        <button>Submit</button>
        </form> 
        </>
      );
    }
    
    export default App;

Answer 1

开发者您好，问题已解决！！

解决问题的步骤：

1. 通过命令npm iexpress-fileupload在服务器内安装名为express-fileupload的依赖项。

2. 在服务器主文件中导入express-fileupload。

3. 最后，调用中间件 app.use(fileupload());

为什么会出现问题！：

因为，默认情况下 req.files未定义，但在服务器上调用中间件，它解析 req.files 并显示从前端发送的文件。