无法使用superagent将文件发布到服务器

Question

我有一个反应应用程序（使用webpack并在localhost上运行），我正在尝试将文本文件发送到我单独创建的服务器，仍在本地 使用Node.js（也在localhost但不同的端口）。对于文件上传，我使用名为Dropzone的库。要发送文件，我使用的是名为superagent的库。

这里的问题是当我发送文件时，服务器接收请求但不接收文件。在我发送文件之前，我控制台记录了文件以确保该对象可用：

我一直在尝试在网上找到的解决方案，但无济于事。我甚至控制台在服务器端记录了请求，但没有找到req.body / req.files。我认为我对superagent库做错了。以下是我尝试过的代码。任何帮助将不胜感激。

服务器端代码

app.js（第一次测试）

var express = require('express');
var app = express();
var bodyParser = require('body-parser');
var mongoose = require('mongoose');
var Metadata = require('./Metadata.model');
var cors = require('cors');
const fs = require('fs');
var port = 3000;

var myDir = ('./tmp');

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
  extended: true
}));
app.use(cors({origin: 'http://localhost:8080'}));

app.post('/upload', function(req, res) {
  try {
    fs.accessSync(myDir);
  } catch (e) {
    fs.mkdirSync(myDir);
  };
  console.log(req);
});

app.js（第二次测试）

var express = require('express');
var app = express();
var bodyParser = require('body-parser');
var mongoose = require('mongoose');
var Metadata = require('./Metadata.model');
var cors = require('cors');
const fs = require('fs');
var fileupload = require('fileupload').createFileUpload('/tmp').middleware;
var port = 3000;

var myDir = ('./tmp');

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
  extended: true
}));
app.use(cors({origin: 'http://localhost:8080'}));

app.post('/upload', fileupload, function(req, res) {
  console.log(req);
});

客户端代码

test_page.js（第一次测试）（完整代码）

import React, { Component } from 'react';
import Dropzone from 'react-dropzone';
var request = require('superagent');

const ROOT_URL = 'http://localhost:3000';

class TestPage extends Component {

  onDrop(files){
    files.forEach((file) => {
      console.log(file);
      request.post(`${ROOT_URL}/upload`)
      .attach(file.name, file)
      .end((err, res) => {
        console.log(err);
        console.log(res);
      })
    });
  };

  onOpenClick(){
    this.refs.dropzone.open();
  }

  render(){
    return(
      <div>
        <Dropzone ref="dropzone" onDrop={this.onDrop}>
          <div>Drop files here</div>
        </Dropzone>
        <button type="button" onClick={this.onOpenClick.bind(this)}>
          Open Dropzone
        </button>
      </div>
    );
  }
}

export default TestPage;

test_page.js（第一次测试）（已更改的代码）

onDrop(files){
    files.forEach((file) => {
      console.log(file);
      request.post(`${ROOT_URL}/upload`)
      .set("Content-Type", "text/plain")//also tried ("Accept", "text/plain")
      .send(file)
      .end((err, res) => {
        console.log(err);
        console.log(res);
      })
    });
  };