Node.js Express文件上传（React、Express、MongoDB）

我正在尝试将文件从前端上传到后端。但是，我不断收到400个错误请求。 有人能帮我吗？非常感谢你

这是我的软件包版本

"express": "^4.17.1",
"mongoose": "^5.7.3",
"react": "^16.9.0",
"reqwest": "^2.0.5",
"antd": "^3.23.0",
"express-fileupload": "^1.1.6-alpha.6",

这是我的后端如果删除If语句并保存典型模型，则不会发生错误。因此，我认为req.files不起作用

const express = require('express')
const Router = express.Router()
const app = express();
Router.use(fileUpload());

Router.post('/addFile', function(req, res){
        if (!req.files || Object.keys(req.files).length === 0) {
            return res.status(400).send('No files were uploaded.');
        }


})

这是我的前端如果我在初始化formData之前打印fileList的值，我可以看到文件对象

import React from 'react';
import {Upload, Button, Icon, message} from 'antd';
import 'antd/dist/antd.css';
import reqwest from 'reqwest';  

class Demo extends React.Component {
  state = {
    fileList: [],
    uploading: false,
  }

  handleUpload = () => {
    const { fileList } = this.state;
    // multipart/form-data
    const formData = new FormData();
    formData.append('file1', fileList[0]);   

    this.setState({
      uploading: true,
    });

    // You can use any AJAX library you like
    reqwest({
      url: '/user/addFile',   
      method: 'post',
      processData: false,
      data: formData,
      success: () => {
        this.setState({
          fileList,
          uploading: false,
        });
        message.success('upload successfully.');
      },
      error: () => {
        this.setState({
          uploading: false,
        });
        message.error('upload failed.');
      },
    });
  }

  render() {
    const { uploading, fileList } = this.state;
    const props = {
      onRemove: (file) => {
        this.setState((state) => {
          const index = state.fileList.indexOf(file);
          const newFileList = state.fileList.slice();
          newFileList.splice(index, 1);
          return {
            fileList: newFileList,
          };
        });
      },
      beforeUpload: (file) => {
        this.setState(state => ({
          fileList: [...state.fileList, file],
        }));
        return false;
      },
      fileList,
    };

    return (
      <div>
        <Upload {...props}>
          <Button>
            <Icon type="upload" /> Select File
          </Button>
        </Upload>
        <Button
          type="primary"
          onClick={this.handleUpload}
          disabled={fileList.length === 0}
          loading={uploading}
          style={{ marginTop: 16 }}
        >
          {uploading ? 'Uploading' : 'Start Upload' }
        </Button>
      </div>
    );
  }
}
export default Demo;

从“React”导入React；
从“antd”导入{上传、按钮、图标、消息}；
导入“antd/dist/antd.css”；
从“reqwest”导入reqwest；
类Demo扩展了React.Component{
状态={
文件列表：[]，
上传：错，
}
handleUpload=（）=>{
const{fileList}=this.state；
//多部分/表单数据
const formData=new formData（）；
append（'file1'，fileList[0]）；
这是我的国家({
上传：对，
});
//您可以使用任何喜欢的AJAX库
雷克韦斯特({
url:“/user/addFile”，
方法：“post”，
processData:false，
数据：formData，
成功：（）=>{
这是我的国家({
文件列表，
上传：错，
});
message.success（'上传成功'）；
},
错误：（）=>{
这是我的国家({
上传：错，
});
message.error（'上载失败'）；
},
});
}
render（）{
const{upload，fileList}=this.state；
常量道具={
onRemove：（文件）=>{
this.setState（（状态）=>{
const index=state.fileList.indexOf（文件）；
const newFileList=state.fileList.slice（）；
拼接（索引，1）；
返回{
fileList:newFileList，
};
});
},
上传前：（文件）=>{
this.setState（state=>({
文件列表：[…state.fileList，文件]，
}));
返回false；
},
文件列表，
};
返回(
选择文件
{正在上载？'Upload'：'Start Upload'}
);
}
}
导出默认演示；

req.files.file1&我发现您的服务器端代码存在一些问题

在这里查看我的帖子，不要将其发送到AWS，而是将其发送到客户端/公共文件夹中的images文件夹。此外，请确保解决跨源资源共享问题。我知道这是我写的，所以感觉像垃圾邮件，但我真的认为这会让你朝着写作的方向前进。如果没有，我为分心道歉

---

使用file.mv将其移动到client/public/images

在服务器路由中记录请求对象时会发生什么？看起来您正在使用键

file1

发送文件。也许

req.files

未定义，也许应该是

req.file1

？@seanulus它不工作。谢谢。你能给我们看一下req.file的日志吗？