Question

我尝试将文件上传到服务器，但出现错误500。

在前端（反应）上，我使用axios：

class InputFile extends Component {
  constructor(props) {
    super(props);
    this.state = { selectedFile: null };
    this.handleUploadFile = this.handleUploadFile.bind(this);
    this.handleUpload = this.handleUpload.bind(this);
  }

  handleUploadFile(event) {
    this.setState({
      selectedFile: event.target.files[0]
    });
  }

  handleUpload() {
    const data = new FormData();

    data.append('file', this.state.selectedFile, this.state.selectedFile.name);
    axios
        .post('http://127.0.0.1:8000/upload', data)
        .then(res => {
          console.log(res.statusText);
        });
  }

  render() {
    return (
      <div>
        <input name='file' type='file' formEncType='multipart/form-data'
          onChange={this.handleUploadFile} multiple
        />
      </div>
      )
     }
    }

在后端（节点）上，我试图将文件保存在文件夹中：

app.route('/upload')
    .post((req, res, next) => {
      const uploadFile = req.files.file;
      const fileName = req.files.file.name;

      uploadFile.mv(
          `uploadFiles/${fileName}`,
          (err) => {
            if (err) {
              return res.status(500).send(err);
            }

            res.json({
              file: `uploadFiles/${req.files.file.name}`
            });
          },
        );
    });

实际上我在控制台中遇到错误：

未捕获（承诺）错误：请求失败，状态码为500

后端的 req.files 是未定义。我该如何解决？一次可以上传一个或多个文件

在前端，我使用：“ axios”：“ ^ 0.18.0”，

在后端，我使用：“ express-fileupload”：“ ^ 1.0.0”

Answer 1

问题出在后端目录路径。我改变了这个：

`uploadFiles/${fileName}`,

在我的计算机上完整路径：

/var/*/uploadFiles/${fileName}，

我也迷糊了添加：

const fileUpload = require('express-fileupload');

app.use(fileUpload());

如何在React + Node中修复上传文件？

1 个答案: