Node.js 从多节点服务器访问React中的上载数据

所以我想出了如何使用React和Node上传文件。它似乎在工作，但我对这些东西还是很陌生，我不太明白如何访问我刚刚上传到React的文件。我想要它，这样你就可以在React中使用一个表单来上传一个zip文件，然后我想要一些脚本来解压上传的文件并对内容执行一些操作。我已经正确上传了文件，但我不确定上传后如何将文件名数据传递到React中

我的服务器文件：

const port = process.env.PORT || 5000;
const express = require('express');
const bodyParser = require('body-parser');
const multer = require('multer');
const uuidv4 = require('uuid/v4');
const path = require('path');

const storage = multer.diskStorage({
  destination: (req, file, cb) => {

    cb(null, './src/uploads');
  },
  filename: (req, file, cb) => {


    const newFilename = `${uuidv4()}${path.extname(file.originalname)}`;
    cb(null, newFilename);
  },
});

var fileFilter = function (req, file, cb) {

   if (
    file.mimetype !== 'application/zip'
    ) {

      req.fileValidationError = 'goes wrong on the mimetype';
      return cb(new Error('mimetype does not match application/zip. upload rejected'));
   }
   console.log('>> fileFilter good = ',file.mimetype)
   cb(null, true);
  }

const upload = multer({ storage: storage, fileFilter: fileFilter });

const app = express();

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

app.post('/', upload.single('selectedFile'), (req, res) => {

  res.send();
});


app.listen(port, () => console.log(`Server listening on port ${port}`));

我的文件：

import React, { Component } from 'react';
import axios from 'axios';

class UserForm extends Component {
  constructor() {
    super();
    this.state = {
      description: '',
      selectedFile: '',
    };
  }

  onChange = (e) => {
    switch (e.target.name) {
      case 'selectedFile':
        this.setState({ selectedFile: e.target.files[0] });
        break;
      default:
        this.setState({ [e.target.name]: e.target.value });
    }
  }

  onSubmit = (e) => {
    e.preventDefault();
    const { description, selectedFile } = this.state;
    let formData = new FormData();

    formData.append('description', description);
    formData.append('selectedFile', selectedFile);

    console.log('form data ',formData)

    axios.post('/', formData)
      .then((result) => {
        console.log('>> (onSubmit) file upload result = ',result);
        // access results...
      })
      .catch(function (error) {
        console.log('>> ERROR FILE UPLAOD ',error);
        alert('File upload failed. Please ensure you are uploading a .zip file only')
      })
  }

  render() {
    const { description, selectedFile } = this.state;
    return (
      <form onSubmit={this.onSubmit}>
        <input
          type="text"
          name="description"
          value={description}
          onChange={this.onChange}
        />
        <input
          type="file"
          name="selectedFile"
          onChange={this.onChange}
        />
        <button type="submit">Submit</button>
      </form>
    );
  }
}

export default UserForm;

import React，{Component}来自'React'；
从“axios”导入axios；
类UserForm扩展组件{
构造函数（）{
超级（）；
此.state={
说明：“”，
所选文件：“”，
};
}
onChange=（e）=>{
开关（如target.name）{
案例“selectedFile”：
this.setState（{selectedFile:e.target.files[0]}）；
打破
违约：
this.setState（{[e.target.name]：e.target.value}）；
}
}
onSubmit=（e）=>{
e、 预防默认值（）；
const{description，selectedFile}=this.state；
设formData=new formData（）；
formData.append（'说明'，说明）；
formData.append（'selectedFile'，selectedFile）；
console.log（'formData'，formData）
axios.post（'/'，formData）
。然后（（结果）=>{
log（'>>（onSubmit）文件上载结果='，结果）；
//访问结果。。。
})
.catch（函数（错误）{
log（'>>错误文件UPLAOD'，错误）；
警报（'文件上载失败。请确保仅上载.zip文件'）
})
}
render（）{
const{description，selectedFile}=this.state；
返回(
提交
);
}
}
导出默认用户表单；

在您的情况下，您正在上载单个文件。所以你需要像这样从

/

路线返回它

app.post('/', upload.single('selectedFile'), (req, res) => {
  res.send( req.file );
});

当您使用Multer并上传这样的文件时，

req.file

将是您在此处上传的文件，即

selectedFile

。因此，您需要将其返回到您想要的任何地方使用

此

req.file

包含一些信息，如

原始名称、文件名、路径等。您可以在前端使用这些信息。例如，您可以抓取
路径
（上传文件的完整路径），然后在
中使用它

这是一个非常简单的例子，当你的应用程序变大时，逻辑会变得更复杂

this.state = {
      description: '',
      selectedFile: '',
      imagePath: '',
};

axios.post('/', formData)
    .then((result) => {
        this.setState({imagePath: result.data.path})
})
....

{this.state.imagePath && <img src={this.state.imagePath} /> }