FormData() 正在发送输入字段的值但没有将文件从 React 发送到快递服务器？

Question

我正在使用 React 并尝试同时将表单输入和图像文件发送到快速服务器。我尝试将这些输入数据和文件附加到 formData() 并通过 axios post 请求将其发送到后端，但问题是：用户提供的表单输入完全可以表达服务器，但文件未定义后端

我的 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

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

解决问题的步骤：

通过命令 npm i express-fileupload.
在服务器内部安装名为 express-fileupload 的依赖项
在服务器的主文件中导入express-fileupload。
最后，调用中间件app.use(fileupload());

为什么会出现这个问题!:

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

FormData() 正在发送输入字段的值但没有将文件从 React 发送到快递服务器？

FormData() is sending value of input field but not sending the file from React to express server?

node.js

reactjs

file

multipartform-data

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