req.files null 但 req.body =file:[object file] 使用 express-fileupload /reactjs

如何解决req.files null 但 req.body =file:[object file] 使用 express-fileupload /reactjs

我需要你的帮助 我正在尝试使用 express-fileupload 在我的代码中上传文件，但在 nodemon 中 req.files 始终为空，但我发现我的文件属性传递给 req.body

有我的前端反应代码：

import Message from './Message';
import Progress from './Progress';
import axios from 'axios';

const FileUpload = () => {
  const [file,setFile] = useState('');
  const [filename,setFilename] = useState('Choose File');
  const [uploadedFile,setUploadedFile] = useState({});
  const [message,setMessage] = useState('');
  const [uploadPercentage,setUploadPercentage] = useState(0);

  const onChange = e => {
      console.log(e.target.files[0].name)
    setFile([e.target.files[0]]);
    setFilename(e.target.files[0].name);
    console.log(file)
  };
 
  const onSubmit = async e => {
    
    const formData = new FormData(); console.log(file)
    formData.append('file',file);
   
  if(!formData){
   console.log("empty");}
  
   for (var key of formData.entries()) {
       
    console.log(key[0][0] + ',' + key[1][0])
}
    try {
        const res = await axios.post('http://localhost:5001/up',formData,{
        headers: {
          'Content-Type': 'multipart/form-data'
        },onUploadProgress: progressEvent => {
          setUploadPercentage(
            parseInt(
              Math.round((progressEvent.loaded * 100) / progressEvent.total)
            )
          );
        }
        
      });
      console.log("file read");
      // Clear percentage
      setTimeout(() => setUploadPercentage(0),10000);
      console.log(res)
      const { fileName,filePath } = res.data;

      setUploadedFile({ fileName,filePath });

      setMessage('File Uploaded');
    } catch (err) {
     console.log(err)
      setUploadPercentage(0)
    }
  };

  return (
    <Fragment>
      {message ? <Message msg={message} /> : null}
      <form onSubmit={onSubmit} enctype='multipart/form-data'>
        <div className='custom-file mb-4'>
          <input
            type='file' 
            enctype='multipart/form-data'
            className='custom-file-input'
            id='customFile'
            onChange={onChange}
          />
          <label className='custom-file-label' htmlFor='customFile'>
            {filename}
          </label>
        </div>
        here: {filename} 
        <Progress percentage={uploadPercentage} />

        <input
          type='submit'
          value='Upload'
          className='btn btn-primary btn-block mt-4'
        />
      </form>
      {uploadedFile ? (
        <div className='row mt-5'>
          <div className='col-md-6 m-auto'>
            <h3 className='text-center'>{uploadedFile.fileName} kkkk</h3>
            <img style={{ width: '100%' }} src={uploadedFile.filePath} alt='' />
          </div>
        </div>
      ) : null}
    </Fragment>
  );
};

export default FileUpload; 

在这里我试图知道我发送的 fromdata 是否为空，但不是我认为的问题 还有后端：

import cors from "cors"
import nez_topographie from "./api/controllers/nez_topographie.route.js"
import fileUpload from "express-fileupload"
import bodyParser from "body-parser"
import morgan from "morgan"

const app = express()

app.use(cors())
app.use(express.json())

app.use(fileUpload());  
app.post('/up',async (req,res) => {
    try {
        console.log(req)
        console.log(req.body.file)
        console.log(req.files)
        if(!req.files) {
            console.log("null")
            res.send({
                status: false,message: 'No file uploaded'
            });
        } else {
            //Use the name of the input field (i.e. "avatar") to retrieve the uploaded file
            let avatar = req.files.file;
            
            //Use the mv() method to place the file in upload directory (i.e. "uploads")
            avatar.mv('./' + avatar.name);

            //send response
            res.send({
                status: true,message: 'File is uploaded',data: {
                    name: avatar.name,mimetype: avatar.mimetype,size: avatar.size
                }
            });
        }
    } catch (err) {
        console.log(err)
        res.status(500).send(err);
    }
});

export default app

在我的控制台中，我资助： [console.log(req)][1]

而且我确定我的 formData 不为空

另外，我找到了这个解决方案： [解决方法不起作用][2]

但是 ":any" 不起作用： [发现错误][3]

我认为 express-fileupload 不起作用，但我也尝试在表单和输入中添加 enctype='multipart/form-data' 但 req.files 总是 null 希望你能帮我 谢谢你帮助我:) [1]：https://i.stack.imgur.com/VBoXL.png [2]：https://i.stack.imgur.com/E3ldm.png [3]：https://i.stack.imgur.com/sEY8Q.png